目次
ウェブサイトにYouTube動画を埋め込む際、デスクトップだけでなく、スマートフォンやタブレットなどさまざまなデバイスで美しく表示されることが重要です。レスポンシブ対応を施さないと、画面サイズに応じて動画の表示が崩れ、ユーザー体験が損なわれる可能性があります。本記事では、CSSを使用してYouTube動画をレスポンシブ対応にする方法を、具体的なコード例とともに詳しく解説します。
レスポンシブ対応の重要性
現代のウェブユーザーは、さまざまなデバイスを使用してウェブサイトにアクセスします。デスクトップ、ラップトップ、タブレット、スマートフォンなど、画面サイズや解像度が異なる環境での表示を最適化することは、ユーザー体験の向上やSEO（検索エンジン最適化）において非常に重要です。特に動画コンテンツは、視覚的なインパクトが大きいため、適切な表示が求められます。
基本的なYouTube埋め込み方法とその問題点
<iframe width="560" height="315" src="https://www.youtube.com/embed/hQN45euU6_I?si=lT403R64Osx92IWE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>この方法では、固定された幅（560px）と高さ（315px）が指定されています。これにより、デバイスの画面サイズに応じて動画のサイズが変わらず、特にモバイルデバイスでは表示が小さくなったり、はみ出したりする問題が発生します。
CSSでレスポンシブ対応を実現する方法
YouTube動画をレスポンシブ対応にするためには、以下のようなCSS技術を使用します。
- コンテナの幅をパーセンテージで指定し、画面サイズに応じて幅を調整。
- アスペクト比を維持するために、
aspect-ratioプロパティやpadding-topテクニックを使用。 iframeの幅と高さを自動調整し、親コンテナにフィットさせる。
aspect-ratioプロパティを使用する方法
最近のブラウザでは、aspect-ratioプロパティを使用してより簡単にアスペクト比を維持することができます。以下にその方法を示します。
CodePen ソースコードサンプル
See the Pen dots by web-developer-note.com (@TTTaka_fuku) on CodePen.
HTML
<div class="video">
<div class="youtubeContainer">
<iframe src="https://www.youtube.com/embed/hQN45euU6_I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>CSS
.video {
width: 80%;
margin: 0 auto;
}
.youtubeContainer iframe {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16/9;
}解説
.videoで親コンテナの幅を変更可能にする。- .youtubeContainer内にiframeを設置しaspect-ratio: 16 / 9;指定してあげることによってレスポンシブ化にする。
padding-topを使用する方法
古いブラウザではaspect-ratioがサポートされていない場合があります。そのときに代替策としてpadding-topで対応することも可能です。
CodePen ソースコードサンプル
See the Pen youtube iframe aspect-ratio by web-developer-note.com (@TTTaka_fuku) on CodePen.
HTML
<div class="video">
<div class="youtubeContainer">
<iframe src="https://www.youtube.com/embed/hQN45euU6_I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>CSS
.video {
width: 80%;
margin: 0 auto;
}
.youtubeContainer {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtubeContainer iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}解説
- .youtubeContainerにposition: relative;を設定し子要素（iframe）を絶対配置する。
padding-top: 56.25%;: 16:9のアスペクト比を維持するためのパディング。計算方法は(9/16)*100 = 56.25%。- iframeは親コンテナ内で絶対配置する。
- .videoは先ほどのコードと同様です。
まとめ
CSSを使用してYouTube動画をレスポンシブ対応にする方法を、具体的なコード例とともに解説しました。aspect-ratioプロパティやpadding-topを活用することで、どのデバイスでも美しく表示される動画埋め込みを簡単に実現できます。
この記事で紹介した方法を参考に、ぜひ自身のウェブサイトで実装してみてください。補足: 複数の動画を埋め込む場合や、カスタムデザインを適用する際は、個々のニーズに合わせてCSSを調整してください。また、最新のブラウザサポート状況を確認し、必要に応じて対応する方法を選定してから対応することをおすすめします。
