iframeをフレキシブルに

youtubeやgooglemapなどiframeコンテンツを埋め込む際、サイズの指定にpxしか出来ない場合が多いですよね。クロスデバイスを想定したレスポンシブなコーディングが主流になった現在、絶対値でのサイズ指定は自殺行為です。多くの場合、はみ出るか途切れます。そんな悲劇を避けるちょっとしたスタイリングの紹介です。

はみ出さないフレキシブルなiframeのCSS

例えばこんなgooglemapがあります。

サイズは600x450です。これをスマフォなどの一部環境で見ると要素からはみ出ますね。

こいつをdivでくくり、適当にクラスを付けてやります。

<div class="iframe">〜googlemapコード</div>

そのクラスを付けたdivのheightを0にしてpadding-topで%単位で高さを調節します。
16:9の割合でフレキシブルにしたいなら9/16=0.5625→56.25%となります。
divにposition:relativeがかかっているので、子のiframeにposition:absoluteと指定することでdivの位置から100%広がります。

.iframe {
  position: relative;
  height: 0;
  padding-top: 56.25%;
}
.iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}