【CSS】YouTube動画などをレスポンシブに対応させる例|iframeの高さ・横幅の比率を維持

Webサイトやブログ内に、YouTube動画などの外部コンテンツを埋め込む際にiframe要素を利用しますが、今回は、そのiframe内のコンテンツをデバイスサイズにより可変させる際に、アスペクト比(長辺と短辺の比率)を維持してレスポンシブに対応させる例となります。
iframeをアスペクト比を維持してレスポンシブにする例|YouTube動画など
以下、iframe要素をレスポンシブに対応させるHTML・CSSの例となります。
例では、iframe内のコンテンツをデバイスサイズにより可変するようにし、コンテンツのアスペクト比は常に16:9にします。
HTMLの例
HTMLではiframe要素をdiv要素などで囲みます。また、例のiframeタグはYouTubeの埋め込みコードとなります。
<div class="iframe-container">
<iframe src="https://www.youtube.com/embed/eDhnBTEVyik" frameborder="0" allowfullscreen="allowfullscreen">
</div>
CSSの例
CSSではiframe要素とiframe要素の親要素に対して、それぞれのプロパティを指定します。
.iframe-container {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
CSSのポイントとなる箇所の説明
以下、CSSのポイントとなる箇所となります。
- 「iframe要素の親要素」に対して「iframe要素」を絶対配置とするためのpositionプロパティを指定します。
- 「iframe要素の親要素」のボックスサイズを16:9とするため、width: 100%;とpadding-top: 56.25%;のプロパティを指定します。
- 「iframe要素」の位置と横幅・高さを指定します。
上記CSSにより、iframe要素に親要素のボックスサイズが適用されます。
そのことにより、iframe内のコンテンツがデバイスサイズにより可変し、アスペクト比が常に16:9となります。
高さの指定について
プロパティpaddingを%の値で指定すると、「親要素の横幅」に対する割合で指定できます。そのため、今回の例では、iframe要素の親要素でpadding-topを利用して高さの割合を指定しています。
また、プロパティheightを%の値で指定すると「親要素の高さ」に対しての割合となるため、親要素に高さが指定されていない場合、heightでは高さを出すことができません。
アスペクト比の16:9について
今回の例では、パソコン向け YouTubeの標準アスペクト比 16:9に合わせ、iframe内のコンテンツを16:9とするため、iframe要素の親要素を、横幅が1に対して高さが9 / 16(0.5625)となるプロパティの値を指定しています。
また、iframe内のコンテンツのアスペクト比を変更する場合には、iframe要素の親要素のプロパティpadding-topの値を変更してみてください。