1. TOP
  2. WordPress
  3. WordPressにyoutube動画を埋め込む（レスポンシブ対応）

WordPressにyoutube動画を埋め込む（レスポンシブ対応）

Youtube website screengrab

Photo by Szabo Viktor on Unsplash

WordPressサイトでYoutube動画を埋め込むにはそんなに難しくはない。

Classic Editorならテキストエディタでコンテンツ内にURLを入力するだけで表示される。
（※ただし、<p>URL</p>のようにタグの間に記述したり、ハイパーリンクなどにすると上手く表示されない）
詳細・参考：オブジェクトの埋め込み#使い方

また、ブロックエディターでは『埋め込みブロック』を使って埋め込みたいURLをコピーしてペーストするだけで簡単に埋め込みが出来る。
詳細・参考：オブジェクトの埋め込み#ブロックエディター

しかし、仕事でWebサイト制作の際にカスタムフィールドなどを使用して動画を投稿するような案件の場合はどうするか。
まさか、お客様に、youtubeのurlの前後はタグが入ってしまうと上手く動かないので・・・・という説明をしたとしても「タグってなに？？？？」という事になる。

カスタムフィールドにyoutube用の投稿欄を作る


カスタムフィールドの作成方法については割愛。
ex:)フィールド名を『mv_url』に設定。
フィールドタイプは『URL』でも『テキスト』でもどちらでも良い。
カスタムフィールドの設定が出来たら、次は表示さたい箇所へ出力するためのコードを記述。

<?php if( get_field('mv_url') ); ?>
<?php echo $embed_code = wp_oembed_get( get_field('mv_url') ); ?>
<?php endif; ?>

これでYoutubeが埋め込まれて表示される。
（テキストエディタでURLを記述して表示される※上記参照）

しかし、このままではまだレスポンシブにはなっていない。


埋め込んだ動画をレスポンシブ対応にする


カスタムフィールドに入力してもらう前提であれば、出力タグの記述に予め設定しておけるが、急に普通に投稿エディタ内に貼り付けた、などイレギュラーもあるかもしれない。


functions.phpで自動的にタグが出力されるように設定する

//YouTubeのビデオを：<div>でマークアップする
function ytwrapper($return, $data, $url) {
	if($data->provider_name == 'YouTube') {
		return '<div class="ytvideo">'.$return.'</div>';
	} else {
		return $return;
	}
}
add_filter('oembed_dataparse','ytwrapper',10,3);

これで埋め込んだ動画のurlを<div class=”ytvideo”>埋め込み動画のURL</div>
というように自動で<div>でboxが出力される。


縦横比を維持したままレスポンシブ対応させるためのCSSを設定

css 
.ytvideo {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 56.25%; //16:9の比率の場合
	overflow: hidden;
	margin-top: 30px;
	margin-bottom: 30px
}
.ytvideo iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}

これで縦横比を維持したままレスポンスブで埋め込み完了。

余談：上記CSSで縦横比を維持したまま背景画像として何かしたい場合でも応用出来たりする。
（padding-top: 56.25%　の56.25%は　9/16*100→高さ/横幅*100 ）

SENSITIVITY