• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

iframe のレスポンシブ対応

以下のように、Youtube やGoogle Maps の埋め込みコード(iframe)をdiv 要素で囲みます。
<div class="iframeWrapper">
<iframe width="640" height="480" src="…"></iframe>
</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%;
    }
親要素である.iframeWrapper に指定したpadding-top:75% の値は、iframe のサイズ比(Youtube やGoogle Maps のサイズ比)をもとに算出します。

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


iframe のレスポンシブ対応サンプル

Youtube とGoogle Maps をiframe で埋め込み表示したサンプルです。

Youtube



Google Map



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください