YoutubeやGoogle Mapsのiframe埋め込みをレスポンシブ対応させる方法!どこよりもわかる理由まで解説!

YoutubeやGoogle Mapsの埋め込みをWebサイトに設置したいとき、ありますよね。

2018年6月、Google Maps APIの料金体型に変化が生じたことにより、今後Google Mapsに関しては特にiframeタグでのシンプルな埋め込みが増えるのではないかと個人的には予想しています。

さて、そんなYoutubeやGoogle Mapsの埋め込みをiframeタグを使って、しかもレスポンシブ対応させたい時の方法について、どこよりも詳しい「なぜ?」を含めて、今回の記事では解説させていただけたらと思います!

YoutubeやGoogle Mapsのiframeタグでの埋め込みをレスポンシブ対応させる方法

まずは、YoutubeやGoogle Mapsのiframeタグでの埋め込みをレスポンシブ対応させる方法からご紹介させていただけたらと思います。

多くのWebサイトやブログでも紹介されていることなので、今更ながら・・・ということもあるかもしれませんが、意外と「なぜその方法なのか」が解説されていないことが多かったりするので、今回のブログ記事でも改めて解説する必要があると思いましたので、紹介させていただきます!

See the Pen googlemaps-iframe-responsive by majikari-keruo (@castero) on CodePen.

今回は、東京駅周辺のGoogle Mapsの地図を、縦横比率4:3の大きさで埋め込み表示させたサンプルコードを貼り付けてみました。

表示させたい地図の埋め込みコードををGoogle Mapsから取得して、貼り付けます。

Google Mapsの埋め込みコードを表示する手順

Google Mapsの埋め込みコードを表示する手順

手順はシンプルですが、目的の地図を表示させた状態で、Google Mapsのメニューから「地図を共有または埋め込む」→「地図を埋め込む」のところからiframeのコードを取得することができます。

そして、iframeタグを外側から囲むようにdivタグを1つ追加します。

そして

.iframe-outer{
  position:relative;
  padding-top:75%; /*4:3の縦横比率にしたい場合、3÷4=75%*/
}

.iframe-tags{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  
}

といったようにCSSを追加します。

上記コードにも追加しましたが、縦横比率を4:3にしたい場合は、padding-topのところを75%とします。

縦横比率を16:9にしたい場合は、56.25%に設定するようにします。

なぜ、このような方法を使ってiframeタグをレスポンシブ対応させることができるのか

ここまでは、数多くのWebサイトでご紹介されている「YoutubeやGoogle Mapsのiframe埋め込みをレスポンシブ対応させる方法」の紹介になります。

では、なぜ今回ご紹介したような方法を使って、YoutubeやGoogle Mapsのiframe埋め込みをレスポンシブ対応させることができるのでしょうか??

意外とこの点はご紹介されていないので、ここから解説させていただきたいと思います。

今回は、Google Mapsを縦横比率4:3で常にレスポンシブ対応で表示させたい場合を例にとって、解説していきたいと思います。

heightとpadding-top(bottom)を%にした場合、何を基準とした%になるのか

パッと思いつくところでは、if

シェアする

  • このエントリーをはてなブックマークに追加

フォローする