【WordPress】YouTubeの埋め込みなどiframe要素をまとめてレスポンシブ対応するカスタマイズ

【WordPress】YouTubeの埋め込みをまとめてレスポンシブ対応するカスタマイズ

iframe要素をレスポンシブ対応させようとして、CSSで単純にmax-width:100%と指定してしまうと、縦横比が合わずに変な表示になってしまいます。

また、iframeでの埋め込みをうまくレスポンシブ対応させる機能を持っているテーマでも、そのまま使うと、すべてのiframe要素をレスポンシブ対応にしてしまう恐れもあります。

今回は、iframe要素での埋め込み広告等はレスポンシブ対応にせず、YouTube、Instagram、Vine等、特定のiframe要素をまとめてレスポンシブ対応にするカスタマイズ方法を紹介します。

YouTubeなどの埋め込み(iframe)をレスポンシブ対応する方法

綺麗なレスポンシブな動作は好きですか?よっひー(@yosiakatsuki)です。

ブログ記事にYouTubeの動画の埋め込みをすると、スマホで見た時に横に動画が飛び出てしまう…

「じゃあ飛び出ないように横幅調整しよう!」とCSSでmax-width:100%を付けてしまうと縦横比が合わなくなってやたら見づらい埋め込みが出来上がってしまいます…

縦横比を綺麗に保ちながらレスポンシブ対応するなら、次のようなコードを書く必要があります。

<!-- iframeの外側をdiv.youtube-containerで囲う -->
<div class="youtube-container"><iframe 〜〜〜></iframe></div>
.youtube-container {
  position: relative;
  padding-bottom: 56.25%; /* 縦横比を決めるポイント */
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.youtube-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height:100%;
}

埋め込みのiframedivで囲い、そこにCSSで縦横比が固定になるようなスタイルをつけていきます。

ちなみに上記コードはSTINGER 5に実装されていたコードを参考にしています。

やり方は他にもありますので、下記なども参考にしてみてください。

ただ、iframeの親に毎回divを付けるなんて面倒くさい…

といっためんどくささはWordPressならPHP側でなんとでも出来ます。

STINGER5のiframeレスポンシブ対応の不満点

僕はWordPressのテーマにはSTINGER 5を使っています。

STINGER 5には記事内に書かれたiframe要素をまとめてレスポンシブ対応するためのコードとスタイルが標準装備されています!

//iframeのレスポンシブ対応(youtube,instagram,vine)
function wrap_iframe_in_div($the_content) {
  if ( is_singular() ) {
    $the_content = preg_replace('/< *?iframe/i', '<div class="youtube-container"><iframe', $the_content);
    $the_content = preg_replace('/<\/ *?iframe *?>/i', '</iframe></div>', $the_content);
  }
return $the_content;
}
add_filter('the_content','wrap_iframe_in_div');

上記コードと先に説明したCSSを追加すれば、STINGER 5以外でもiframeをまとめてレスポンシブにする機能が使えます。

ただ、ブログにiframe要素の広告等を貼り付けた場合、広告もレスポンシブになり、大きく無駄なスペースをとってしまいます。

iframe広告が広がってしまう…

iframe要素の中でもレスポンシブ対応させたいのは動画のみなので、YouTubeやInstagramの埋め込みなど、特定のiframe要素のみレスポンシブ対応にするカスタマイズ方法を紹介します。

YouTubeなどの特定のiframeのみレスポンシブ対応する

STINGER 5をお使いの場合、修正するのはfunctions.phpの「wrap_iframe_in_div」関数です。(command(ctrl) + F等でファイル内を検索してみてください。)

STINGER 5以外をお使いの場合、まるっとコピペしてもらえればOKです。

コードはSTINGER 5に実装されているものを基準に、変更前・変更後コードを書きました。(変更前はコメントアウトしています)

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

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

  //Instagram
  $the_content = preg_replace('/<iframe[^>]+?instagram\.com[^<]+?<\/iframe>/is', '<div class="youtube-container">${0}</div>', $the_content);

  //Vine
  $the_content = preg_replace('/<iframe[^>]+?vine\.co[^<]+?<\/iframe>/is', '<div class="youtube-container">${0}</div>', $the_content);
}

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

変更前部分のコードだと、記事内に書かれたiframe要素全てを<div class="youtube-container">で囲っていたのに対し、変更後では、YouTube、Instagram、vineの埋め込みのみ囲うようになります!

functions.phpを編集することになりますので、うっかりカスタマイズのミスでページ真っ白にならないためにもローカル環境でのカスタマイズがおすすめです。

追記:上記カスタマイズだけだと、PC表示の時に埋め込みが大きくなりすぎたので最大幅を指定するカスタマイズもやりました。

その他動画サービスでもドメイン名を指定すれば対応可能

今回紹介したコードでは「YouTube」「instagram」「vine」に対応させてみました。(ごめんなさい。vineはテスト未実施です)

今ある他の動画投稿サービスの埋め込みや今後出てくるサービスについても、youtube\.comのようにドメインの書かれた部分を変更すれば対応可能…のはずです。

自分で変更するのは「正規表現」の知識を必要とするので、ちょっと敷居が高いですが、コツさえ掴めばカスタマイズは簡単です!

参考にしたページ

今回参考にしたのは以下のページです。

ありがとうございました。

よっしーのひとこと

よっひー

「正規表現置換でこんなやり方もあるんだー」と、プログラム的な面で勉強になりました!

これ、広告貼ってる場合はもしかしたらチャンスロスに繋がるかもしれないので、早めの対応をおすすめします!

ではまた。