YouTube動画・Googleマップなどをレスポンシブにする例【CSS】iframeでの埋め込み

Webサイトやブログ内に、YouTubeやGoogleマップなどの外部コンテンツを埋め込む際にiframe要素を利用しますが、今回は、そのiframe内のコンテンツをデバイスサイズにより可変させ、レスポンシブとする例となります。

iframeをレスポンシブにする例

以下、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%;のプロパティを指定します。

上記CSSにより、iframe要素に親要素のボックスサイズが適用され、iframe内のコンテンツがデバイスサイズにより可変し、アスペクト比が常に16:9となります。

高さの指定について

プロパティpaddingを%の値で指定すると、「親要素の横幅」に対する割合で指定できます。そのため、今回の例ではpadding-topを利用して高さの割合を指定しています。

また、プロパティheightを%の値で指定すると「親要素の高さ」に対しての割合となるため、親要素に高さが指定されていないと高さを出すことができません。

アスペクト比の16:9について

今回の例では、パソコン向け YouTubeの標準アスペクト比 16:9に合わせ、iframe内のコンテンツを16:9とするため、iframe要素の親要素を、横幅が1に対して高さが9 / 16(0.5625)となるプロパティの値を指定しています。

また、iframe内のコンテンツのアスペクト比を変更する場合には、iframe要素の親要素のプロパティpadding-topの値を変更してみてください。

参考サイトなど

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

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

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