WordPress投稿で「YouTubeの動画URLそのまま貼り付けで自動生成されるプレイヤー」のサイズを調整する方法

このような方向け

  • WordPress投稿画面にYouTubeの動画URLそのまま貼り付けで生成されるiframeプレイヤーがとにかく扱いづらい
  • かといって、YouTube動画の埋め込みコードを毎回コピペするのが面倒くさい

この問題に対し、以下を自動化する事で記事制作コストの低減を目指します。

  • 自動生成されるiframeからwidthとheightの指定を取り除き
  • iframeに特定のclassを持つ親要素を付与する
  • レスポンシブ対応する

これで、投稿画面でYouTube動画URLをそのまま貼り付けてもレスポンシブ対応したプレイヤーが生成されます。

解決方針

WordPressの投稿画面でYouTubeの動画URLを直貼りすると、こんなhtmlが生成されます。

<p><iframe width="XXX" height="YYY" src="https://www.youtube.com/embed/V39lXlaj830?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>

これを以下のように自動変換します。

<div class="youtube"><iframe src="https://www.youtube.com/embed/V39lXlaj830?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  • iframeタグから width=”XXX” と height=”YYY” を消し
  • iframeの親要素に class=”youtube” を加える

CSSで iframe の親要素である p.youtube に対してプレイヤーをレスポンシブ対応するスタイリングを行っています(おまけで後述します)。

function.php

上記にあるhtmlを自動変換する処理を function.php に記述します。

//投稿画面のYouTubeのURL直貼りにclassを自動で加える
function youtube_tag_replace($content) {
$pattern = '#<p><iframe (.+?) src="https://www.youtube.com/(.+?)</p>#i';
$replace = '<div class="youtube"><iframe src="https://www.youtube.com/$2</div>';
return preg_replace($pattern, $replace, $content);
}
add_filter('the_content', 'youtube_tag_replace');

変数$1には width と height 表記を格納し、置換後は削除。
変数$2には youtube.com/ 以降の表記を格納し、置換後もそのまま流用。

#i はPHP正規表現のパターン修飾子のひとつで、マッチ部分の大文字と小文字を区別しないオプションを示します。

久しぶりに正規表現を使いました。
あと今回はじめて知ったのですが、PHPのデリミタはスラッシュ以外にも # や ~ が使えるらしく、スラッシュ以外で囲うとスラッシュをいちいちエスケープしなくて良いという嬉しいメリットがありました。今回は # を使いました。

注意点1
URLを貼る行の上と下に、それぞれ改行を入れて下さい。
URLを貼った行の直前や直後の行に文章があると、

でくくられずに前後に
が付きますので、パターンにマッチしなくなります。

注意点2
動画アップロード者により貼り付けが許可されていない動画は、そもそもURLそのまま貼り付け自体に対応していないので無効(ただURLのテキストが載るだけ)となります。
この場合はしかたなくembedコードを貼り付けるしかありません。

基本的には以上です。

おまけ. YouTubeプレイヤーをレスポンシブ対応させるCSS

もうすっかりスタンダードになっている気がしますが、備忘も兼ねて掲載しておきます。

.youtube { 
padding-bottom:56.25%;
position:relative;
overflow:hidden;
}

.youtube iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

参考文献