【css】YouTubeのiframe埋め込みをレスポンシブさせる方法

1.HTMLの構成

まずは、YouTubeの埋め込みコード（iframe）を、専用のコンテナ（divなど）で囲むのが基本スタイルです。

<div class="video-container">
  <iframe 
    src="https://www.youtube.com/embed/動画ID" 
    title="YouTube video player" 
    frameborder="0" 
    allowfullscreen>
  </iframe>
</div>

2.aspect-ratioを使った書き方

現在、最も推奨されるシンプルな方法です。たった数行で完結します。

.video-container {
  /* 親要素の幅いっぱいに広げる */
  width: 100%;
  /* 16:9の比率を維持する */
  aspect-ratio: 16 / 9;
}

.video-container iframe {
  width: 100%;
  height: 100%;
}

• aspect-ratio: プロパティ一つで「幅と高さの比率」を固定できます。
• メリット: 余計な計算が不要で、HTML構造もシンプルに保てます。

3.padding-top使った書き方

古いブラウザ（IEなど）への対応が必要な場合に使う、伝統的な「Padding Hack」と呼ばれる手法です。

.video-container {
  position: relative;
  width: 100%;
  /* 高さ = (9 ÷ 16) × 100 = 56.25% */
  padding-top: 56.25%; 
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

なぜ padding-top なのか？：

CSSの仕様で、padding を % で指定すると、「親要素の横幅」を基準に計算されるという性質を利用しています。これにより、横幅が伸縮しても常に一定の比率で高さを確保できるのです。

---

4.比率別・計算シート

YouTube以外の動画や、ショート動画（9:16）などで使える数値表です。

アスペクト比	aspect-ratio	padding-top の値	用途
16:9	16 / 9	56.25%	一般的な動画
4:3	4 / 3	75.00%	昔のテレビ・モニター
9:16	9 / 16	177.77%	YouTubeショート・TikTok