ビジュアルエディタのみでYoutubeを「レスポンシブ対応&最大値指定&中央配置」で埋め込む方法

2019年1月7日2020年11月23日

WordPressで、Youtube動画の埋め込みを下記のように行いたいと思ったのですが、結構苦労しました。

レスポンシブ対応
横幅の最大値に上限をつける（1コラムのデザインなので大きくなりすぎないようにしたい）
横幅が上限値になった場合は、中央に配置
投稿者がビジュアルエディタしか使えない場合でも使えるようにする（テキストエディタの使用は不可）

検索してよく出てくるのが、divタグでiframeを囲うという方法。

ただ、これだとテキストエディタを使用しないといけないので、今回実現したいものにはなりません。

一応、なんとか実装できたので備忘録として方法を書いておきます。

Youtube動画を「レスポンシブ対応&最大値指定&中央配置」で埋め込む方法(概要)

結論から言うと、下記の2つのページで紹介されているコードをマージすればOK。

参考Youtube (iframe) をレスポンシブ対応に
参考WordPressに埋め込んだYOUTUBE動画をレスポンシブに対応させる方法

具体的には、下記2つの作業をすればOK。

functions.phpに、投稿内で<iframe></iframe>を見つけたらそこをdivで囲うようにするコードを追記。
style.cssに追記。

style.cssに追記するコード

.youtube {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
    overflow: hidden;
}
.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.yt_wrapper {
  max-width: 640px;
  min-width: 280px;
  margin: 20px auto;
}

.youtube {

position: relative;

padding-bottom: 56.25%;

padding-top: 25px;

height: 0;

overflow: hidden;

}

.youtube iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

.yt_wrapper {

max-width: 640px;

min-width: 280px;

margin: 20px auto;

}

functions.phpに追記するコード

function iframe_in_div($the_content) {
if ( is_singular() ) {
$the_content = preg_replace('/&lt;iframe/i', '&lt;div class=&quot;yt_wrapper&quot;&gt;&lt;div class=&quot;youtube&quot;&gt;&lt;iframe', $the_content);
$the_content = preg_replace('/&lt;\/iframe&gt;/i', '&lt;/iframe&gt;&lt;/div&gt;&lt;/div&gt;', $the_content);
}
return $the_content;
}
add_filter('the_content','iframe_in_div');

function iframe_in_div($the_content) {

if ( is_singular() ) {

$the_content = preg_replace('/<iframe/i', '<div class="yt_wrapper"><div class="youtube"><iframe', $the_content);

$the_content = preg_replace('/<\/iframe>/i', '</iframe></div></div>', $the_content);

}

return $the_content;

}

add_filter('the_content','iframe_in_div');

簡単なコード説明

動作概要

ビジュアルエディタで「https://www.youtube.com/watch?v=w-QbR1gWEP8」のようにYoutube動画のURLを入れると、wordpress側で勝手に<iframe></iframe>の埋め込み形式に変換。
今回追記したfunctions.phpのコードによりiframeがdivで囲われた形に置き換えて出力。
divにつけたクラスでレスポンシブ対応。