ウィンドウ幅に対応した埋め込み動画のcssが分かりません

ウィンドウ幅に対応して動画サイズが変わるのですが、どうして以下のようなcssで可能になるかが理解できません。
どなたか教えていただけないでしょうか？

html
1<p>
2    <iframe>
3</p>

css
1p {
2    padding: 56.25% 0 0 0;
3    position: relarive;
4    width: 100%;
5}
6iframe {
7    position: absolute;
8    top: 0;
9    right: 0;
10    width: 100% !important;
11    height: 100% !important;
12}

行動規範の内容に同意します

回答3件

こんにちは。

現状のソースだとpタグが意味をなしてないから理解できないんじゃないですか？
pタグのwidth変えても画面に対していっぱいいっぱいに表示されるだけじゃん的な。。。

本来ならpタグのwidthを80%にしたらwindowに対して80%で動画を表示されるべきですが
現状だと
pタグのpositionの値が間違って記載されています。

css
1    p {
2        padding: 56.25% 0 0 0;
3        position: relative;
4        width: 100%;
5    }

が正しい記述です。
そしてpaddingで与えている56.25%ってのは割と肝だと個人的には思います。

http://design-spice.com/2014/03/24/percentag/
個人的にはこっちのほうが丁寧なのでこの辺見てみると理解できるかと思います。

投稿2016/05/30 10:28

kogure

総合スコア299

ベストアンサー

chiro.0516さんの紹介されている参考URLでほぼ説明しつくされている感はありますが、
一応補足。

まず、ウィンドウ幅に対応して動画サイズ（iframeのサイズ）が変わる仕組みですが、
大きく２つの柱があります。

###１．親要素の横幅に対して一定の比率でサイズが変わる空白領域を作る

まず「１」を実装しているのが今回のコードで言えばこの部分です。

CSS
1p {
2    padding: 56.25% 0 0 0;
3}

ショートハンドになっていますが要するに、padding-top: 56.25%;これがポイントです。
CSSにおいてpadding/marginの値を%で指定した場合、何を基準とするのか？
そこが分かっていれば「横幅に対して常に一定のサイズの領域を作る仕組み」が理解できるようになります。

padding/marginの値を%にした場合、基準となるのはその親要素の横幅です。

・自分自身の横幅ではなく、親要素の横幅を基準とする
・左右のmargin/paddingだけでなく上下のmargin/paddingでも、基準となるのは親要素の横幅である

CSSのこの仕様により、
親の横幅100%に対してpadding-topを56.25%とすることで、16:9の比率の空白領域を常に保つことが
できるようになります。（参考サイトでは16:9→9÷6=56.25となっていますが、正確には9÷16×100=56.25%ですね）

###２．１で作った空白領域内全体をiframeで覆う
次に、この一定比率を保ったまま拡大縮小する空白領域の上に、動画を埋め込むためのiframe要素を
position:absolute;で被せます。

CSS
1iframe {
2    position: absolute;
3    top: 0;
4    right: 0;
5    width: 100% !important;
6    height: 100% !important;
7}

この時、iframe要素の**widthとheightを共に100%**にすることで、
widthは親要素の幅いっぱいに、heightは親要素の高さいっぱいに拡がることになります。
iframe要素も%指定していますので、親のコンテナ要素のサイズが変わればそれに応じて
iframe要素のサイズも変わります。
そこに、Youtubeの動画が表示される、という仕組みです。

お分かりいただけましたでしょうか？

投稿2016/05/30 10:26