iframeを横幅100%で埋め込みたいけど、高さを設定するには？

/ CSS / By
ショコラ
ショコラ

iframeを横幅100%で埋め込みたいけど、高さを設定するには？

①position:relateive で 横幅100% と 縦のパディングトップ で枠を作る。
②中身の position:absolute は、width100% と height100% で relateiveの枠（横幅100% と 縦のパディングトップの枠）まで引き伸ばす。
これは技ですね～。

もっさん先輩
もっさん先輩

iframe の横幅（width）を指定して読み込むことはできますが、これだと スマートフォン で表示したときに、ページから iframe がはみ出てしまいます。

<iframe
  width="600"
  height="400"
  frameborder="0" style="border:0"
  referrerpolicy="no-referrer-when-downgrade"
  src="https://www.google.com/maps/embed/v1/place?q=35.6812405,139.7649308&zoom=18&key=AIzaSyCtj0LD-hrJPmYEMKN0a_k-NbTzPmtXsaI"
  allowfullscreen
  loading="lazy">
</iframe>

width に 100% を設定してみますが、これだと縦長になってしまいます。

<iframe
  width="100%"
  height="400"
  frameborder="0" style="border:0"
  referrerpolicy="no-referrer-when-downgrade"
  src="https://www.google.com/maps/embed/v1/place?q=35.6812405,139.7649308&zoom=18&key=AIzaSyCtj0LD-hrJPmYEMKN0a_k-NbTzPmtXsaI"
  allowfullscreen
  loading="lazy">
</iframe>

横幅100% で 縦は横幅に対して 66.66% になるように、以下の方法で対応します。
①position:relateive で 横幅100% と 縦のパディングトップ66.66% の枠を作ります。
②中身の position:absolute は、width100% と height100% で relateive の枠（横幅100% と 縦のパディングトップの枠）まで引き伸ばします。

<div style="position:relative;width:100%;height:0;padding-top:66.66%">
<iframe
  style="position:absolute;top:0;left:0;width:100%;height:100%;"
  frameborder="0" style="border:0"
  referrerpolicy="no-referrer-when-downgrade"
  src="https://www.google.com/maps/embed/v1/place?q=35.6812405,139.7649308&zoom=18&key=AIzaSyCtj0LD-hrJPmYEMKN0a_k-NbTzPmtXsaI"
  allowfullscreen
  loading="lazy">
</iframe>
</div>

更に、横幅を最大 500px に抑えるには、max-width で囲みます。

<div style="max-width:500px;">
<div style="position:relative;width:100%;height:0;padding-top:66.66%">
<iframe
  style="position:absolute;top:0;left:0;width:100%;height:100%;"
  frameborder="0" style="border:0"
  referrerpolicy="no-referrer-when-downgrade"
  src="https://www.google.com/maps/embed/v1/place?q=35.6812405,139.7649308&zoom=18&key=AIzaSyCtj0LD-hrJPmYEMKN0a_k-NbTzPmtXsaI"
  allowfullscreen
  loading="lazy">
</iframe>
</div>
</div>

以上

Scroll to Top