chiro.0516さんの紹介されている参考URLでほぼ説明しつくされている感はありますが、
一応補足。
まず、ウィンドウ幅に対応して動画サイズ(iframeのサイズ)が変わる仕組みですが、
大きく2つの柱があります。
###1.親要素の横幅に対して一定の比率でサイズが変わる空白領域を作る
まず「1」を実装しているのが今回のコードで言えばこの部分です。
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%ですね)
###2. 1で作った空白領域内全体を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の動画が表示される、という仕組みです。
お分かりいただけましたでしょうか?
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。