以前、Youtube動画の埋め込み(iframe)のレスポンシブ対応【CSS】で紹介したYoutube動画埋め込みのレスポンシブ対応ですが、今回はGoogleマップの埋め込みも合わせて紹介いたします。
埋め込み用のiframeのコードを取得する
それぞれの埋め込みをするためのiframeコードを取得します。
<!-- Youtube -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/xbl3rtywYDI?si=D5h1a6iIxjRNH9T2" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<!-- Googleマップ -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.827853707464!2d139.7645498760653!3d35.681240529972996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1722486412775!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>取得したiframeコードをそのまま埋め込むと、widthやheightが指定されているので、画面サイズによっては画面を貫通または横スクロールバーが出てしまいます。
これを解消する為にレスポンシブ用のCSSを記述していきます。
レスポンシブ対応させるCSSを記述する
埋め込みをするiframeをレスポンシブ対応するには以下のCSSを記述します。
iframe {
width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9;
}!importantをwidthとheightに指定する事で、HTMLのiframeタグ内に記述されているインラインの指定を打ち消す事ができます。
また、上記は全幅での表示になりますが、iframeに記述しているwidthに合わせたい場合はwidthをmax-widthに書き換えてください。
aspect-ratioで16:9の比率での表示になります。比率を変更する場合はここの数値を変更してみてください。
※古いブラウザ等対応していないものもあります。対応させたい場合は、以前紹介したYoutube動画の埋め込み(iframe)のレスポンシブ対応【CSS】を参照ください。
表示例
以下はHTML・CSSをそれぞれ適応させた表示例になります。
さいごに
いかがでしたでしょうか。
aspect-ratioを使用する事で簡単にレスポンシブ対応が可能になります。GoogleマップやYoutubeに限らず使用できますので、レスポンシブ対応を忘れずに行いましょう。
