【CSSだけでOK】YouTube動画をレスポンシブ対応する方法

YouTube動画をWebサイトに埋め込んだとき、
「スマホで見るとサイズがおかしい」「画面からはみ出る」なんて経験はありませんか？

実は、CSSだけで簡単にレスポンシブ対応できる方法があります！

この記事では、YouTube埋め込み動画をスマホ・PC両対応にするCSSテクニックをご紹介します。

なぜそのままだとレスポンシブにならないの？

YouTubeから取得したiframeコードは、通常このようになっています。

<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID" frameborder="0" allowfullscreen></iframe>

このように幅と高さが固定（px指定）されているため、画面幅に合わせて自動でリサイズされません。
以下が埋め込みコードをコピペしただけの状態です。

サンプル

画面幅を変更してみてください！比率を維持しながらサイズが変わるかと思います！
ちなみにこちらの動画は私のおすすめ動画です。いつも癒されてます。ありがとうございます。

CSSでレスポンシブ化する方法（比率維持）

以下のCSSを使えば、アスペクト比（16:9）を保ったままレスポンシブになります。

<div class="youtube">
  <iframe src="https://www.youtube.com/embed/動画ID" frameborder="0" allowfullscreen></iframe>
</div>

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9の比率（9 ÷ 16 × 100） */
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

なぜこれでうまくいくの？

• .youtube 要素は padding-top: 56.25% を使って高さを割合で確保しています（アスペクト比を維持）
• その中にある iframe を position: absolute でピタッと敷き詰める
• 幅は100%、高さも100%で画面サイズに自動フィット

→ これでスマホでもタブレットでも綺麗に表示される埋め込み動画の完成です！

他の比率（4:3など）の場合はどうする？

比率を変えたい場合は、padding-top の値を変更します。

まとめ

YouTube動画を埋め込むなら、
そのまま貼るだけでなく、CSSでのレスポンシブ対応もセットで！

スマホでの表示崩れを防いで、見やすいサイトづくりに役立ててください！