ワードプレスでYouTubeの埋め込みをレスポンシブ対応する


どうも、こんにちは。
友太郎(@yutarou_sakai)です。

今回はワードプレスでYouTubeの埋め込みをレスポンシブ対応するためのコードを紹介します。

レスポンシブ対応していない状態だと、スマホで横ずれが起きてしまい非常に使いづらいサイトになってしまいます。

少しコードを追加するだけで簡単にレスポンシブ対応できますので、サクッとやってしまいましょう!

ワードプレスでYouTubeの埋め込みをレスポンシブ対応する

ブログやサイトにYouTubeを埋め込むことが増えてくると思いますので、まだレスポンシブ対応していない場合は早いうちにやっておきましょう。

モバイルフレンドリーじゃないのは、SEO的にも良くないですからね!

コードを追加

今回はfunctions.phpとstyle.cssにコードを追加していきます。

functions.php


function iframe_in_div($the_content) {
    if ( is_singular() ) {
        $the_content = preg_replace('/<iframe/i',
        '<div class="youtube"><iframe',$the_content);
        $the_content = preg_replace('/<\/iframe>/i','</iframe></div>', $the_content);
    }
    return $the_content;
  }
  add_filter('the_content','iframe_in_div');

これで、YouTubeの埋め込みコードをyoutubeクラスが付いたdivタグで囲むことができます。

そして、このdivタグを使ってレスポンシブ対応させていきます!

style.css


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

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

今回はスマホ用にコードを書くのではなく、動画サイズを画面に合わせて拡大縮小させることにより対応しています。

そのためwidthとheightの%調整することで、画面サイズの変更が可能です!
そのあたりはお好みで変えてみてくださいm(__)m

動画時代には必須

既存のテーマを使っている方にはほとんど関係ない内容でしたが、万が一レスポンシブ対応してなかったりした場合にぜひ参考にしてください!

昨今、動画時代なんて言われていますので、サイト・ブログをしっかりと動画に対応していきたいですね~。
Webサイトと動画の組み合わせは、なかなか強いと思います!

それでは最後までご覧いただきありがとうございました。
またお会いしましょう!