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

今でも使われる機会がある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を使用していますが、それについてはまたのちほど！

簡単ですね！