【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の値を変更してみてください。

参考サイトなど

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。