HTML5&CSS iframe: GoogleMap,YouTubeをレスポンシブに表示する

  • -

    シェア
  • ---

    LINEで送る
  • -

    はてなブックマーク
    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
us us
html5 css3 image

GoogleMapやYouTubeを埋め込むときに使うiframeタグ。これをレスポンシブに対応する方法です。

HTMLに少し修正を加えてあとはCSSで対応します。

You TubeやGoogle Mapの埋め込みのレスポンシブ対応

You TubeやGoogle MapなどをHTMLに埋め込む場合は、iframeタグを使います。

このiframeタグをレスポンシブに対応することで、埋め込んだYou TubeやGoogle Mapをスマホやタブレットでも自然に表示することができます。

さっそくサンプルコードで見てみましょう。

iframeタグにdiv要素でボックスを追加

iframeのサイズをレスポンシブにするために、divタグでiframeを囲うボックスを作成します。

<div>
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d12962.48172155079!2d139.75586937791607!3d35.68634706791085!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1505738394779" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Google Mapの埋め込みコードを下に表示します。

これをスマホのサイズで表示すると、横がはみ出してしまいます。(ブラウザの開発ツールで表示しても確認できます。)

CSS指定のサンプル

今回はサンプルなのでhtml文に直接CSSを指定します。本来はCSSファイルに記述するようにしましょう。

<div style="position: relative; width: 100%; padding-bottom: 75%;">
    <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d12962.48172155079!2d139.75586937791607!3d35.68634706791085!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1505738394779" width="600" height="450" frameborder="0" style="border:0" allowfullscreen="allowfullscreen"></iframe>
</div>

iframeを"position: absolute;"、divを"position: relative;"にすることで、div内にiframeを収めます。

iframeの基準は"top: 0; left: 0;"を指定してdiv要素の左上にします。

iframeのサイズは"width: 100%; height: 100%;"にすることで、div要素のサイズ内で最大限に広げます。

divの"width: 100%; padding-bottom: 75%;"で iframeのサイズを自動的に決めるようにします。

"width: 100%;"は親要素の幅いっぱいにiframeの横幅を広げます。これで画面サイズによって横幅が自動的に決まります。

"padding-bottom: 75%;"は、親要素のwidthの75%のサイズiframeの縦幅になります。横幅をレスポンシブに決めることによって縦幅も自動的に決まります。

padding-bottom: 75%は、横縦比4:3として計算しています。横縦比16:9にする場合は、56.25%になります。padding-bottomはpadding-topに置き換えることもできます。

CSSを指定したコードを下に表示します。

 

これをスマホのサイズで表示すると、サイズが自動的に変更されます。

 

最近Webカテゴリでよく読まれている記事です。
post-cta-image
blog image

ドメイン取得の意味が分からない人へ。王道の方法を紹介します。

ドメインの登録業者を選ぶのに悩む必要はないです。サイトを簡単に早く公開するには全くいらないことで、むしろ邪魔です。『お名前.com』というサービスは必ず耳にします。そのお名前.comのメリットとデメリットと一緒に、ドメインの意味が分からない人が一番失敗しないドメインの取得方法を紹介します。

tadtadya.com

_

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この記事を気に入ったらぜひシェアも!!