YouTube iframeをレスポンシブ対応する方法【aspect-ratioで縦横比固定】

公開日: 2023.03.10
最終更新日: 2026.07.17

YouTubeなどのiframeをWebサイトに埋め込むとき、レスポンシブ対応でつまずいた経験はないでしょうか。スマホ表示で横幅を100%にすると、今度は高さが合わずに映像がつぶれてしまう——よくある悩みです。

結論から言うと、iframeにaspect-ratioプロパティで縦横比を指定するだけで、横幅に合わせて高さが自動で決まり、縦横比を保ったままレスポンシブ対応できます。この記事では、よくある失敗例からaspect-ratioを使った解決法、従来の手法との違いまでを解説します。

1 よくある失敗：高さがつぶれてしまう
2 解決法：aspect-ratioを使う
3 aspect-ratioの仕組み
4 従来の方法（padding-topハック）との比較
5 ブラウザ対応
6 まとめ

よくある失敗：高さがつぶれてしまう

スマホ用に横幅を100%にしようとして、次のように書くケースがあります。

.youtube iframe {
  width: 100%;
  height: auto;
}

ところが、これだと高さがautoのまま横幅だけが広がり、映像がぺしゃんこにつぶれてしまいます。iframeは画像と違い、height: autoで縦横比を保ってくれないためです。

解決法：aspect-ratioを使う

そこで役立つのがaspect-ratioプロパティです。iframeを親要素で囲み、iframe側に縦横比を指定します。

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

.youtube iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: 100%;
  border: none;
}

これで、スマホでもiframeの縦横比を保ったまま、横幅に合わせて高さが自動調整されます。画面幅が変わっても比率が崩れることはありません。

HTMLのiframeにはwidth="560"のような属性が付いていますが、CSSのwidth: 100%が優先されるため、属性はそのままで問題ありません。.youtubeで囲んでいるのは、レイアウト上の幅の基準を作るためです。

aspect-ratioの仕組み

aspect-ratio: 16 / 9は、「幅と高さの比を16対9に保つ」という指定です。YouTube動画は16:9が基本なので、この値を使います。width: 100%で横幅を親要素いっぱいに広げると、その幅に対して高さが自動で9:16の割合に計算される、という仕組みです。

比率を変えたいときは、値を書き換えるだけです。たとえば正方形なら1 / 1、昔ながらの4:3の動画なら4 / 3と指定します。埋め込むコンテンツの比率に合わせて調整してください。なおaspect-ratioはiframeだけでなく、divやimgなど任意の要素に使えるプロパティです。バナー枠やカードのサムネイルなど、縦横比を固定したい箇所全般で活躍します。

従来の方法（padding-topハック）との比較

aspect-ratioが使えるようになる前は、親要素にpadding-topで高さを確保し、iframeを絶対配置で重ねる「padding-topハック」が定番でした。16:9ならpadding-top: 56.25%（9÷16＝0.5625）を指定する方法です。

/* 従来の方法 */
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 9 / 16 */
}
.youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

この方法でも同じ結果は得られますが、positionやpaddingの計算が必要で、コードがやや複雑になります。aspect-ratioなら比率を1行書くだけで済むので、これから実装するならaspect-ratioのほうがシンプルでおすすめです。

ブラウザ対応

aspect-ratioは、Chrome・Firefox・Safari・Edgeといった主要なモダンブラウザで広くサポートされています。自動で最新版に更新されるこれらのブラウザが対象であれば、実務でも問題なく使えます。ごく古い環境まで確実に対応したい場合のみ、前述のpadding-topハックを併用するとよいでしょう。

補足として、WordPressのブロックエディターでYouTubeを「埋め込みブロック」で挿入した場合は、はじめからレスポンシブに表示されます。今回の方法は、テーマのテンプレートなどにiframeを手書きで埋め込むときに役立ちます。