【GoogleMap,YouTube埋め込みで利用可能!】制御しづらいiframeの大きさを可変にし、レスポンシブ対応にする!

person with toy airplane on world map HTML
Photo by Andrea Piacquadio on Pexels.com
HTML YouTube

今でも使われる機会があるiframe要素ですが、皆さんはどんな時に使ったりしますか?
よくある例としては、Google MapやYoutube動画の埋め込みがあると思いますが、このiframe、使用したことある方であればお分かりかと思いますが、超絶デザイン制御しづらい要素です!
しかし、その際のレスポンシブ対応については、実はものすごく簡単に対応できますのでご紹介します!

結論、iframeは要素をdivで包み、cssで制御!

Google Mapを例にiframe要素を見てみると、ifarmeのサイズを記述している箇所があります。以下のようなコードですね。

width="600" height="450"


そのため、レスポンシブ対応はできないかも?と心配になってしまいます。

確かに、属性でサイズを指定しただけですと「固定」となりますが、CSSを使うことによってレスポンシブ対応は可能です。CSSで制御ができれば上記の固定のサイズ指定コードは消してもOKです!

手順はこの2つのみ!

1.まずはGoogle Map等の埋め込みコード(iframe)をコピペします。そのときに、埋め込みコードの親になるようにブロックレベル要素で囲みます。

<div class="google_map">
	<iframe src="省略" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

2.そしてCSSで以下のように指定します。

.google_map{
	position:relative;
	width:100%;
	height:0;
	padding-top:75%;
}
.google_map iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

完成例

※ここではさらにGoogleMapをモノクロにしたり現在地のマーカーをカスタムするJSを使用していますが、それについてはまたのちほど!

簡単ですね!

タイトルとURLをコピーしました