YouTubeの埋め込み動画をレスポンシブ（可変）に対応させる方法

YouTubeの動画をブログやウェブサイトに埋め込む際にPC・スマホ共に使える、横幅いっぱいのレスポンシブに対応させたいくつかの方法をまとめました。

YouTubeから配布されている埋め込みコードには予めサイズが書かれており、その数字を調整することでサイズの変更は可能ですが、可変でないためパソコンから見るとちょうどよくてもスマホでははみ出てしまったりなど、うまいこと画面に合わせたサイズにするのが難しいかと思います。

解決する方法はCSSの「aspect-ratioを使う」か「padding-topを使う」の2つのパターンがあり、おすすめは前者。
数年前まではaspect-ratioに対応していないブラウザがありましたが、現在ではすべてのモダンで対応しているうえ、比率を変える場合も別のクラスを追記するときも簡単な記述で実現出来るためです。

それではまずは埋め込みコードを取得していきましょう。

YouTube動画の右下にある共有のボタンからです。

クリックで共有メニューが浮き出てくるのでその中の埋め込むに進むと動画の埋め込みに埋め込み用のコードが表示されているのでコピーします。

aspect-ratioで対応させる方法

おすすめの方法で、アスペクト比が異なる動画を埋め込む場合も、比率の数字を変更するだけで対応可能です。

「youtube_container」の部分はそのまま使ってもいいですし、サイトの命名規則に合わせて変更しても大丈夫です。
ブラウザ対応状況はこちら「Can I Use」で確認できます。

.youtube_container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

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

padding-topで対応させる方法

レガシーブラウザにも対応させたい場合などはこちらを使えます。

パーセンテージを変更することで他の比率の動画にも対応可能です（下記参照）。

.youtube_container {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.youtube_container iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

4:3の場合

padding-top: 75%; /* アスペクト比4:3 */

3:2の場合

padding-top: 66.66%; /* アスペクト比3:2 */

1:1の場合

padding-top: 100%; /* アスペクト比1:1 */

WordPressでpadding-topを使う場合

環境によっては上記のpadding-topの方法ではWordPressで効かない場合もあるので、下記のコードを使います。

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

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