【css】YouTube動画をコンテナ幅いっぱいに表示させるaspect-ratio設定

YouTube動画をレスポンシブにコンテナ幅いっぱいに表示させるcssの方法として、これまでpadding-top:を56.25%に設定する手法が採られていましたが、今後はaspect-ratio属性を16/9に設定すると良さそうです。

レスポンシブでYouTubeをコンテナ幅いっぱいに表示させたい

YouTube動画をwebサイトに埋め込む場合、下記のようなhtmlコードになるかと思います。

<div class="youtube-container">
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/*****" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>
</div>

このまま何もしないとPCでは左に寄ってしまい、スマホでは縦横比が16:9にならず左右が切れてしまいます。

例

これをレスポンシブに、常にコンテナ幅いっぱいにに表示させた上で、縦横比（アスペクト比）を16：9に維持して表示させる方法です。

aspect-ratio属性で動画領域を確保する方法

aspect-ratioプロパティは比較的新しいcss属性なのですが、既に主要ブラウザでは対応済みです（IEは未対応）。
cssコードは下記の通りとなります。

.youtube-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube-container iframe {
  width: 100% !important;
  height: 100% !important;
}

これでPCでは横幅100%になり、スマートフォンでも縦横比が16:9に維持されるようになります。

各ブラウザの対応状況

aspect-ratioプロパティのブラウザ対応状況です。

"aspect-ratio" | Can I use... Support tables for HTML5, CSS3, etc

これまでの方法

IE11に対応する必要があった時代は、paddingは親要素の横幅を基準に計算することを利用していました。
YouTube動画をレスポンシブで幅いっぱいに表示させる方法として、下記のコードを紹介されていることが多いです。

.youtube-container {
  position: relative;
  padding-top: 56.25%; /* 16:9 */
  width: 100%;
  height: 0;
}
.youtube-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

幅100%、高さ0のコンテナを作ってpadding-topを 56.25%（16:9）に設定し、YouTube動画の幅と高さを確保しています。

これでも問題なく表示はされるのですが、ボックス高さが0の内側余白領域にYouTube動画のiframeを表示させている状態になるため、ちょっとハック的な書き方に見えます。

はてなブログでの対応

はてなブログのYouTube貼り付け機能を使うとiframeでの埋め込みとYouTubeへの文字リンクが生成されますが、特にラッパータグは生成されません。
下記のように自分でラッパータグとstyleを追加するとよいでしょう。

<div class="youtube-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/WyrhVzYoQyw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
<style>
.youtube-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube-container iframe {
  width: 100% !important;
  height: 100% !important;
}
</style>

styleタグの中身はブログのダッシュボードから
デザイン→カスタマイズ→デザインcss
のところに記載しておけば記事毎の記載は不要となります。

まとめ

IEが滅び、動画領域の確保はaspect-ratio属性を使ってコンテナ領域を確保して良い時代になりました。

【Amazon.co.jp限定】TRUSCO(トラスコ) ダンボー薄型折りたたみコンテナ 50L ロックフタ付 TR-C50B-A-DNB

トラスコ中山(TRUSCO)

Amazon

らいちのヒミツ基地

公然のひみつ基地です