GoogleMapやYouTubeを埋め込むときに使うiframeタグ。これを縦横比（アスペクト比）を変えずにレスポンシブに対応する方法です。
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の埋め込みコードを下に表示します。
これをスマホで見るとwidthがはみ出してしまいます。（ブラウザの開発ツールで表示しても確認できます。）
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" 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のwidthを指定していないので、親要素の幅いっぱいにiframeのwidthを広げます。これで、端末サイズによってwidthが自動的に決まります。
"padding-bottom: 75%;"は、iframeのheightが未指定なので、親要素のwidthの75％のサイズがiframeのheightになります。
（iframeのwidthの75%と同じになります。）
widthがレスポンシブに決まるので、heightも自動的に決まります。widthがいくらになっても、縦横比（アスペクト比）は同じです。
padding-bottom: 75%は、アスペクト比が4：3です。アスペクト比を16：9にする場合は、56.25%にします。padding-bottomは、padding-topでもいいです。
| 4:3 | 75% | よくアイキャッチ画像に使われるサイズ。 |
| 16:9 | 56.25% | 大画面テレビのサイズに使われるなど、 いろいろなところで使われる。 Facebookが推奨する画像サイズも近い。 |
どうしてpadding-bottom(-top)で、heightがwidthの75%になるのでしょうか？
これは、divのheightを未指定にするのがポイントです。
heightが未指定なので、divの縦サイズは0です。iframeの縦の広がりは、divのheight + padding-bottomになるので、じっさいのdivの縦サイズは、padding-bottomと同じになります。
CSSを指定したコードを下に表示します。
これをスマホのサイズで表示すると、サイズが自動的に変更されます。
