ゆっくりブログ
更新日: 2019/6/22
Web

YouTubeの埋め込み動画を自動でレスポンシブ対応するコーディング

この記事はWordPressでの記事更新に対して記載しています。

WordPressのテーマによっては、YouTube動画を埋め込んでも、レスポンシブに対応しないことがあります。
ここでは、記事に埋め込みコードを記述するだけで、自動的にレスポンシブに対応する方法を記載しています。

Youtube動画の埋め込み方

①動画の下にある「共有」をクリックする

②リンクの共有から「埋め込む」をクリックする

動画の埋め込みからコードをクリックする


コード全体が選択されるのでコピーして、記事の埋め込みたいところに張り付けます。

※以下、CSS、jQureyについて、直接ファイルに記述する場合は必ずバックアップを取ってください。

埋め込んだ動画をレスポンシブ対応させる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タグが追加されます。

previous
next