iframeの縦横比を保ったままレスポンシブ表示【Googlemap】【youtube】

iframeの縦横比を保ったままサイズを自在に変更する書き方は

1. iframeをdivで囲む
2. 囲んだdivにwidthと”position: relative;” をつける
3. iframeに”position: absolute;” をつけて、”width: 100%;” と ”height: 100%;” を付ける
4. 親要素のdivにpadding-topをつけ、縦横比を算出して指定する

です。

padding-topに指定する値は、iframeの縦横比にしたがい「高さ/横幅」%を算出します。

高さ400px、横幅800pxのiframeの場合、400/800は1/2なので50%、よって”padding-top: 50%;” と指定しましょう！

高さ600px、横幅800pxの場合は、3/4なので75%ですね。

これで親要素の縦横比をiframeの縦横比と同じに固定できました。

iframeには”position: absolute;” をつけて、幅100%・高さ100%を指定することで「親ブロックとピッタリ同じ大きさ」になります。

あとは親要素のwidthさえ調整すれば、縦横比は保ったまま自在にサイズを調整できますね！

.map__iframe-wrap {
  width: 100%;
  padding-top: 50%;
  position: relative;
}
.map__iframe-wrap > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}