【HTML+CSS】WebサイトにYouTube動画をレスポンシブ対応して埋め込む方法

WebサイトにYouTube動画をレスポンシブ対応して埋め込む方法

①YouTub動画の埋め込みコードを取得

YouTub動画の埋め込みコードを取得する方法は、YouTube動画の再生画面の「共有」→「埋め込む」を選択する。

すると、iframeに囲われたコードが表示されるのでコピーして、それをそのままHTMLにペースト。

②YouTub動画のレスポンシブ

aspect-ratioを指定する方法もあるみたいですが、未対応のブラウザもあるみたいなので今回はpadding-topを指定する方法でレスポンシブ化します。

padding-topで親要素のアスペクト比を調整して、position: absoluteで親要素いっぱいにYouTubeのiframeを表示することでレスポンシブ対応することができます。

HTML

<div class="YouTube">
  <iframe ... ></iframe><!-- YouTube 埋め込みコード -->
</div>

CSS

.YouTube {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}

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

56.25%というのは横幅に対する高さの割合から算出された数字で、56.25%は16:9のアスペクト比です。

この数字は表示したいアスペクト比を自由に設定できます。

おまけ：aspect-ratio

これから主流になると思われるaspect-ratioのコードも書き残します。

HTML

<div class="YouTube">
  <iframe ... ></iframe><!-- YouTube 埋め込みコード -->
</div>

CSS

.YouTube {
  width:100%; /* 任意の横幅を指定 */
  aspect-ratio: 16/9;
}

.YouTube iframe {
  width:100%;
  height:100%;
}

こちらの方がコード量も少ないからと思って実装してみたのですが、対応しているブラウザでもレスポンシブでバグが起こり結局padding-topの方で実装しました。

当面の間はpadding-topの方で実装した方が良さそうです。