iframeをレスポンシブで設置したい

YouTubeみたいな動画やGoogleマップなどには、自分のブログなどに埋め込んで利用できる機能がありますね。
そういった場合、ほとんど、iframeというものを利用して提供されています。

iframeの中にあるコンテンツは、自分のブログとは違うドメイン、違うサーバーで動いていますので、サイズの切り替えは難しいと思われがちですから、スタイルシートで手軽にレスポンシブ化させる方法をご紹介します。

※Googleアドセンスは、iframeの中に入れると規約違反になりますので、注意してください。

iframeをレスポンシブで表示したい時の、CSSの記述方法です。
たとえば、普通のiframeをクラス名(ここではiframe-responsive)で囲みます。

CSSに以下を追加します。

これで、縦横の比率を保ちながら、伸縮します。
CSSの中の、315と560は、元のサイズの比率を計算させるために入れています。
max-width: 560pxは、もともとのiframeのサイズです。

ここの数値は、適時、変更しつつ使ってください。

あるいは、
HTMLとCSSを以下のようにしても。

padding-top:56.25%という数字は、どこから来ているのかというと、高さの315ピクセルを横幅560ピクセルで割ります、315÷560=0.5625。この数字に100をかけ算して、56.25という数字を導きだします。

アスペクト比を保つためにpadding-topに%を記入してください。計算式=高さ÷縦×100 

たとえば、Googleマップで地図をここに掲載したい時、Googleマップの中サイズは、600と400ですから、400÷600×100=66.66….なので、padding-topに66.66%と記入します。

iframeでGoogleマップを設置する例

サンプルソースはこちら。