Google マップやYouTubeをレスポンシブ対応させるCSS

更新日：2017年10月7日

Googleは従来パソコンサイトとスマホサイトがあった場合、パソコンサイトを積極的にインデックスしてきました。パソコンサイトありきのスマホサイトという考え方でした。
しかし、今後はスマホサイトありきのパソコンサイトという考え方に改めると公式に発表しました。要するにスマホでWEBをする人があまりにも増えたので、今時スマホに対応していないサイトはGoogleからの評価が下がりますよということです。

そうした事情もあり、近頃レスポンシブWEBデザインの関心が今までに以上に高まっていることを感じます。私がやる仕事も、社内のものもですが、社外のものもHPを現状のままレスポンシブ対応させたいといった案件がとても多いです。

ここまでレスポンシブの感心・需要がありながらも、WEBサイトに組み込む主要なサービスがレスポンシブに対応していないということが少なくありません。
その代表例がGoogle マップやYouTubeです。

埋め込んでみるも、「え？対応してないの？」と思った方は沢山いるんじゃないでしょうか。
今回はGoogle マップやYouTubeをレスポンシブ対応させる為のCSSをご紹介します。

HTMLは以下のように記述。
Google マップが吐き出すソースは<iframe>で囲まれています。それをgooglemap_responsiveという名前のdivで囲んであげるるだけでOKです。
ちなみに、埋め込む際の設定に小、中、大、カスタムサイズとありますが、どれを選んで貰っても大丈夫ですよ。

Google マップが吐き出すソース

CSSは以下のように記述します。

.googlemap_responsive {
	position: relative;
	padding-bottom: 75%;
	height: 0;
	overflow: hidden;
}

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

これにて解決。

Google マップやYouTubeに限らず、iframeタグ全般のレスポンシブ化に流用出来るソースですので、是非ご活用下さい。