[CSS]iframe要素をレスポンシブ対応させる方法

CSSスニペット

2014.08.10

以前にも iframe やtable のレスポンシブ対応に最適なCSS「Fluidity」の記事を紹介させていただきましたが、今回はfluidityを使わずにちょっとしたCSSのスタイル記述だけで簡単にiframe要素をレシポンシブ対応させる方法をご紹介します。

iframe のレスポンシブ対応
iframe のレスポンシブ対応サンプル
1. Youtube
2. Google Map

iframe のレスポンシブ対応

以下のように、YoutubeやGoogle Mapsの埋め込みコード（iframe）をdiv要素で囲みます。

<div class="iframeWrapper">
<iframe width="640" height="480" src="…"></iframe>
</div>

</div>

※iframeWrapperとなっているクラスは何でも良いです。

iframeとその親要素（.iframeWrapper）に対して、それぞれ以下のようなスタイルを指定します。

div.iframeWrapper {
    position: relative;
    width: 100%;
    padding-top: 75%;
    }

div.iframeWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

div.iframeWrapper {

position: relative;

width: 100%;

padding-top: 75%;

}

div.iframeWrapper iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

親要素である.iframeWrapperに指定したpadding-top:75%の値は、iframe のサイズ比（Youtube やGoogle Maps のサイズ比）をもとに算出します。

Youtube やGoogle Maps のサイズ比は「横：高さ＝4：３」の場合に、.iframeWrapperの横幅（width）を100%とすると、75%のpadding-top を指定してあげます。
※例ではpadding-top にしていますが、padding-bottomでも良いようです。