
YouTubeの埋め込み動画を自動でレスポンシブ対応するコーディング
この記事はWordPressでの記事更新に対して記載しています。
WordPressのテーマによっては、YouTube動画を埋め込んでも、レスポンシブに対応しないことがあります。
ここでは、記事に埋め込みコードを記述するだけで、自動的にレスポンシブに対応する方法を記載しています。
Youtube動画の埋め込み方
①動画の下にある「共有」をクリックする
②リンクの共有から「埋め込む」をクリックする
動画の埋め込みからコードをクリックする
コード全体が選択されるのでコピーして、記事の埋め込みたいところに張り付けます。
埋め込んだ動画をレスポンシブ対応させるCSSの記述
埋め込みコードをdivタグで囲う
先ほど記事内に張り付けたコードをHTMLのdivタグで囲いクラスを付けます。
今回の例ではクラス名を“iframe-wrap”とします。
コードは上記のようになります。
CSSを記述する
こちらのコードをそのままコピペでOKです。
.iframe-wrap {
width: 100%;
padding-bottom: 56.25%;
height: 0px;
position: relative;
}
.iframe-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
これでYouTubeの埋め込み動画のレスポンシブ対応は完了です。
しかし、毎回divタグで囲うのは面倒ですね。
そこで次に、埋め込みコードを記述するだけでレスポンシブ対応するようにjQueryでコードを追加します。
自動的にレスポンシブ対応させるためのjQueryの記述
WordPressでjsファイルを読み込む
jsファイルを読み込む方法は以下の記事を参考にしてください。
→WordPressにCSSファイルやjsファイルを追加する方法
jsファイルの準備ができたら以下のように記述します。
jQuery(function() {
var iframeWrap = jQuery('');
jQuery('iframe').wrap(iframeWrap);
});
これで、記事にYouTube動画の埋め込みをした(iframeタグが読み込まれた)時点で、iframeタグの親要素に、divタグが追加されます。