iframeは使うけれど、できるだけ同じページのような状況（まるで外部ページを読み込んでいるとは思えないような）を再現したかったので、確認画面やエラー画面で高さが変わる、&レスポンシブという理由でただのheight指定はだめ。 iframeは固定？ Google Mapを例にiframe要素を見てみると、「埋め込みサイズ」を決める必要があります。 そのため、レスポンシブ（＝デバイス幅による動的変化）はできないかも？と思ってる方が意外と … iframeのレスポンシブ化でポイントとなるのは縦横の比率.
以下のように、埋め込みコードは発行した際、縦と横の長さの数値を指定することになります。 Youtube やGoogle Maps のサイズ比は「横：高さ＝ 4：3 」の場合に、.iframeWrapper の横幅（width）を100%とすると、 75% のpadding-top を指定してあげます。 ※例ではpadding-top にしていますが、padding-bottom でも良いようです。 iframe のレスポンシブ対応サンプル 画像をスマホ対応させたい場合は、img要素に「width:100%;」を指定しておけば、縦横の比率が保持されたままいろんな端末に対応可能になります。でも、iframeの場合はそのようになってくれません。
HTML のインラインフレーム要素であるiframeをレスポンシブWebデザインに対応する方法をご紹介します。 目次1 ポイント1.1 画面比率1.1.1 画面比率(%) = 高さ÷幅×1002 実装例2.1 html2 […] ただiframe要素のレスポンシブ対応を行う中でやっかいなことは、幅を可変させるのは簡単ですが、高さを可変させるのが難しいということです。 iframe要素の高さをアスペクト比を維持しながら変更させるにはテクニックが必要です。 youtubeの動画をレスポンシブで表示させたいときに使えるCSSです。 埋め込むiframeとそれを囲う要素の2つにスタイルを指定します。 埋め込みコード.