Youtubeなどのiframeをレスポンシブ対応にするCSSとHTML！

以前に同じテーマで記事を書きましたが、その時の内容だと、親要素のサイズに対してwidthとheightを100%で指定し、
親要素の高さをメディアクエリで制御して、iframeがフィット…と言った感じでしたが、今回はそういったものは必要なく、ディスプレイサイズや親要素のwidthに応じて可変する、正統派レスポンシブを実現します。

レスポンシブにしたいiframeを、ブロックレベル要素で包む

クラス名を「iframe-wrap」とします。

挿入した動画はまだ秘密です。エッチではないことは確かです。 この「iframe-wrap」に、CSSを指定します。

.iframe-wrap {    position: relative;    padding-top: 56.25%;    z-index: 3;  }  .sect-movie iframe {    width: 100%;    height: 100%;    position: absolute;    top: 0;    left: 0;  }

親要素の「iframe-wrap」に指定したpadding-topで、iframeの高さが出ます。コレがないとposition:absolute;を指定されたiframeがサイズを見失ってしまうので注意。
heightが無くても収縮はしますが、アスペクト比が保てません。まぁ幅によっては全体が小さくなるので、もしかしたらheight指定無しのほうが見やすいのかも…

以上の指定で、親要素の幅に応じてアスペクト比を保ったまま可変するiframeの実装完了です。
ちなみにデモは親要素の高さを指定していないので、PCの場合、画面いっぱいに動画が広がります。

デモページ

Youtube動画公開中！ぽい感じにしてみる

TVぽいフレーム用の画像を用意して、その中にiframeを配置します。
これでiframe要素の存在が際立ちます

HTMLを修正します。さきほどの「iframe-wrap」を、更に、要素に入れ込みます。

一番外側の親要素のsect-movieにposition:relativeを指定し、内包しているimg（フレーム）にposition:absoluteを指定。
iframeが、テレビの枠に収まっている様子を表現します。

body {    width: 800px;      margin: 0 auto;    }    img {    max-width: 100%;    head: ;height: auto;  }    p {margin: 0;}    .sect-movie {    padding: 40px;    position: relative;  }  .sect-movie img {    position: absolute;    top: 0;    left: 0;  }    .iframe-wrap {    position: relative;    padding-top: 56.25%;    z-index: 3;  }  iframe {    width: 100%;    height: 100%;    position: absolute;    top: 0;    left: 0;    z-index: 2;  }

さらにメディアクエリで、TVぽいフレームよりもディスプレイサイズが狭い場合のスタイルを追加。widthとpaddingを変更して、なおもフィットを維持するように調節します。

@media only screen and (max-width:800px){    body {      width:97%;      padding: 0 1.5%;    }    .sect-movie {    padding: 20px;  }   }

img{max-width:100%; height: auto;}により、bodyサイズいっぱいに広がるTVぽいフレームは、body{width:97%;}とすることで、自動的に収縮します。

デモページ

いかがでしょうか？

paddingや親要素の幅は、ページデザインやフレームに使う画像に応じて変えてください！

でわ！