【WordPress】レスポンシブ対応したiframeの最大幅を指定するカスタマイズ

【WordPress】レスポンシブ対応したiframeの最大幅を指定するカスタマイズ

今回は先日行ったYouTubeなど特定サービスの埋め込みコード(iframe)をレスポンシブ対応にするカスタマイズの続きです。

iframeによる埋め込みの縦横比はそのままに、埋め込みの最大幅を指定するカスタマイズ方法を紹介します!

YouTubeの埋め込み動画の最大幅を指定するカスタマイズ

最大幅を指定しないと結構でかくなる

特定動画のiframeのみレスポンシブにするカスタマイズで動画のレスポンシブ対応が出来ました。

しかし、そのままですと、埋め込み動画の横幅は記事の幅いっぱいにまで広がります…

YouTubeの動画が画面いっぱいに表示されてしまう…

記事本文領域の横幅が大きければ大きいほど、埋め込み動画の縦も大きくなり、画面いっぱいに動画が表示されるなんてことも…

そうならないためにも、少しカスタマイズを加えて、埋め込み動画の最大幅を指定してみます!

YouTubeの埋め込みの最大幅を指定する為のコード

前回にカスタマイズした「wrap_iframe_in_div」関数を修正していきます。(functions.php)

前回のカスタマイズについてはこちらを参照↓

YouTubeのみiframeをレスポンシブにするコードを例に、変更前・変更後コードを紹介します。↓

//iframeのレスポンシブ対応(youtube,instagram,vine)
function wrap_iframe_in_div($the_content) {
if ( is_singular() ) {
  //※変更前※
  /*
  $the_content = preg_replace('/<iframe[^>]+?youtube\.com[^<]+?<\/iframe>/is', '<div class="youtube-container">${0}</div>', $the_content);
  */

  //※変更後※
  //YouTube
  $the_content = preg_replace('/<iframe[^>]+?youtube\.com[^<]+?<\/iframe>/is', '<div class="youtube-container-outer"><div class="youtube-container">${0}</div></div>', $the_content); 
}

return $the_content;
}
add_filter('the_content','wrap_iframe_in_div');

STINGER5の標準のコードであれば下記のようになります↓

//※変更前※
  $the_content = preg_replace('/< *?iframe/i', '<div class="youtube-container"><iframe', $the_content);
  $the_content = preg_replace('/<\/ *?iframe *?>/i', '</iframe></div>', $the_content);

//※変更後※
  $the_content = preg_replace('/< *?iframe/i', '<div class="youtube-container-outer"><div class="youtube-container"><iframe', $the_content);
  $the_content = preg_replace('/<\/ *?iframe *?>/i', '</iframe></div></div>', $the_content);

youtube-container」クラスのついた要素の親要素に「youtube-container-outer」というクラスのついた要素を付け加えているだけです!

実にシンプル。

あとは、「youtube-container-outer」クラスに対してCSSで最大幅を設定していきます。

iframeの埋め込みの最大幅を指定する為のCSS

functions.phpで付け足したyoutube-container-outer」クラスに対してmax-widthを指定すれば完成!

.youtube-container-outer {
    max-width: 560px;
}
動画のサイズをほどよく調整出来ました!

max-widthの値はご自身のサイトに合わせてカスタマイズして下さい!

functions.phpを編集しますので、ミスってサイトが真っ白にならないためにもカスタマイズの際は[ローカル環境](https://tarahako.com/wordpress-local-bitnami)を準備することをおすすめします。

程よいサイズで見やすいサイトに!

記事下にGoogle Adsenseのレクタングルをダブルで配置していたりすると、記事の領域が結構な横幅になると思います…

埋め込み動画のレスポンシブ対応をすると横幅基準で表示サイズが決まるので、幅が広ければ広いほど動画が大きく表示されます。

動画メインのコンテンツであれば「とにかく大きく!」って感じですが、そうじゃなければ、あまり画面いっぱいに表示しないほうがいいのではないかな?と思います。

何事も「ほどほど」に。

よっしーのひとこと

よっひー

僕のブログは結構動画を貼ることが多いので、このカスタマイズは非常に重宝しています!

YouTubeの動画を本気で見たければサイトの埋め込みではなく、「YouTubeを訪れるわ!」って感じだと思いますので、「添えるだけ」程度の大きさに調整するのが無難かと思います。

ではまた。