iframeのレスポンシブ化【Web制作】

こんにちは！Web制作のエンジニアをやっているモリヤス（@_moriyas）です。

Webサイトを作成するときに、「YouTubeの動画を埋め込みたい」「Googleマップを埋め込みたい」という要望は結構あると思います！そんなときに、「iframe」を使った埋め込みになるかと思います！

「iframe」のレスポンシブ対応はちょっとクセがあるので、HTMLとCSSの設定方法を説明していきます！

1 コードとデモの紹介
2 HTML
3 CSS（SCSS）

コードとデモの紹介

See the Pen Untitled by モリヤス (@moriyas) on CodePen.

※CODEPENのページを開いて画面の幅を変化させて確認していただくと挙動がわかりやすいかと思います！

HTML

<div class="map-wrapper">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.747798841949!2d139.74285797586205!3d35.6585848312175!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1696819756769!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

今回はGoogleマップで「東京タワー」の場所を埋め込みたいという想定で、「iframe」のコードを取得してきました！

「iframe」に設定してある属性の値をデフォルトのまま使っております。（2023年10月のデフォルト値）

ポイントは下記2点

「iframe」タグを「div」タグで囲む（divでなければいけないなことはない）
「iframe」のwidth属性とheight属性の値を設定したい値にしておく（今回はデフォルトのまま）

CSS（SCSS）

SCSS

.map-wrapper {
  position: relative;
  width: 100%;
  padding-top: calc(450 / 600 * 100%); // height ÷ width × 100
  
  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}