iframe要素をアスペクト比を保持したままレスポンシブ化する方法

iframe要素といえばちょいと昔(XHTML1.1とか）では非推奨となってましたが
HTML5になるとWebアプリとしての期待からか復活しよりまして(笑)

そらーもうGoogleマップからYoutubeからなんでもかんでも
埋め込みコードを発行するとiframeだらけの水泳大会ですわ。
（決してヤケクソになっているわけではありません）

さて、これがスマホ対応となるとそれなりに面倒くさいんですわね。
そんなもん幅100％指定してやればいいんじゃねえのか、と思いますが
そーんな簡単にはいかんのですよね。
縦横の比率を保持したまま、とかになるとそれなりに頭使わんといけませんでした。

まずは

• iframe要素をdivで囲んでしまう
• どちらにもpositionプロパティを設定。
  （divにはrelative、iframeにはabsolute)
• 親要素のpaddingで、画面比率を無理からねじ込む

という事を考えてみる。

4:3と16:9さえあれば大概は対処出来るやろ、と思いやす。
横幅が100%やとすると、高さの比率 ÷ 幅の比率 × 100なので
4:3なら75％で16:9なら56.25%。

HTMLはこんな感じ。

<div class="iframebox">
 <iframe src="http://xxxxxxxxxxxx.xxx" frameborder="0"></iframe>
</div>

CSSはこう。(これは4:3の場合です。paddingの値で調節）

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

これできっちりと比率を保持したままレスポンシブ化が出来ます。