【CSS】YoutubeやGoogle mapの埋め込みを横幅と高さの比率が固定のレスポンシブ対応にする方法

YoutubeやGoogle mapをホームぺージに埋め込んだ際にレスポンシブ対応にする方法を紹介します。

YoutubeやGoogle mapなどの埋め込みはiframe要素をHTMLに記述しますがそのままだと固定幅での埋め込みになるためスマートフォンで閲覧するとはみ出して一部見れなかったりします。

iframe要素をアスペクト比を維持したままレスポンシブ対応にするためにCSSでちょっとしたテクニックを使用します。

DEMO

デモとしてGoogle mapを埋め込んでみました。下の地図はPC、スマホどちらで見ても16：9のアスペクト比を維持していると思います。

HTML内へのiframeの記述

まずはHTMLの記述です。div要素の中にiframeを記述します。この際にwidthやheightで数値が指定されている場合は削除してしまって下さい。

<div class="iframe_wrap">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.6567846113153!2d139.8085117151124!3d35.7100626801876!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ed0d12f9adf%3A0x7d1d4fb31f43f72a!2z5p2x5Lqs44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sjp!4v1618032720771!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>

CSSでレスポンシブになる様に記述

まずiframeの親要素であるdivに幅を100%指定し、positionにrelativeを指定します。そしてpadding-topに56.25%（アスペクト比を16：9にしたい場合）を指定します。

後はiframeにwidth:100%、height:100%を指定し、positionをabsoluteにすればオッケーです。

.iframe_wrap{
  width:100%;
  height:auto;
  position:relative;
  padding-top:56.25%;
}
.iframe_wrap iframe{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
}

解説

このコードのポイントとしてはアスペクト比を保つためにdivに高さは指定せずにpadding-topに%で高さを指定しているところです。paddingはtopやbottomでも%で指定した場合、親要素の横幅に対しての％の数値になる性質があります。

そのため16:9にしたい場合は横幅に対して高さは9/16*100＝56.25%となるため、padding-topに56.25%を指定すれば幅が変わっても16:9を保つことができるようになります。

iframe要素にはpositionをabosluteを指定した上で幅も高さも100％を指定すればdivの幅と高さが変わるのに合わせてiframeも幅や高さを変えてくれるはずです。

まとめ

iframeをレスポンシブ対応にするテクニックでした。自分のアカウントのtwitterやfacebookのフィードを埋め込む際にも使用できます。またこの方法は他にも応用が効くので覚えておくといいですね。

DEMO

HTML内へのiframeの記述

CSSでレスポンシブになる様に記述

解説

まとめ

SHARE