レスポンシブデザインでiframe埋め込み

レスポンシブデザインでiframe埋め込み
Image by malawiheiko from Pixabay

2020.12.20（更新日：2020.12.21）

Google mapやyoutubeの埋め込みのコード取得は以外と簡単。
だけどレスポンシブデザインで決まったレイアウトに埋め込もうとすると、CSSにちょっとした工夫が必要になる。
コピペで済むレベルなんだけど、いつも探すのでまとめておく。

この記事は１年以上経過しています。内容的に古い場合があります。

heightのアスペクト比を求める

要するに幅に対しての高さが何パーセントかと言うこと。幅100パーセントとした時に

  • 地デジ、DVD・ブルーレイなどはワイド画面サイズ「16：9」なので「56.25%」
  • アナログテレビ、VHSなどはスタンダード画面サイズ「4：3」なので「75%」

Youtubeはワイド画面サイズなので56.25%と言うことになる。
Google mapはレイアウトに合わせて任意でOK。

CSSで比率を保つレイアウト

この方法を初めて見た時「なるほど～」的な感動があった。苦労した昔が懐かしい。

/* CSS */
.wrapper { 
  height: 0;
  padding: 56.25% 0 0; //ここに比率をパーセントで記述
  position: relative;
  overflow: hidden;
}
.wrapper iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

ざっくり説明すると親の幅を基準にpaddingで高さをもたせ、positionで中身のiframeを表示させる。positionの指定でiframeは親のサイズいっぱいに表示される。なので親のheightを０にするのは必須でoverflowは保険。
これで幅に対して比率を保ちながら縮小拡大してくれる。
もし親（.wrapper）にborderなど指定する際はbox-sizingを指定しておくと安心。

/* CSS */
.wrapper { 
  height: 0;
  padding: 56.25% 0 0;
  position: relative;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

と言うよりCSSリセット時に全タグにかけておくと面倒ない。