質問: ウィンドウ幅に対応して動画サイズが変わるのですが、どうして以下のようなcssで可能になるかが理解できません。 どなたか教えていただけないでしょうか? ``` ``` ``` p { padding: 56.25% 0 0 0; position: relarive; width: 100%; } iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; } ```
回答: こんにちは。 現状のソースだとpタグが意味をなしてないから理解できないんじゃないですか? pタグのwidth変えても画面に対していっぱいいっぱいに表示されるだけじゃん的な。。。 本来ならpタグのwidthを80%にしたらwindowに対して80%で動画を表示されるべきですが 現状だと pタグのpositionの値が間違って記載されています。 ``` p { padding: 56.25% 0 0 0; position: relative; width: 100%; } ``` が正しい記述です。 そしてpaddingで与えている56.25%ってのは割と肝だと個人的には思います。 http://design-spice.com/2014/03/24/percentag/ 個人的にはこっちのほうが丁寧なのでこの辺見てみると理解できるかと思います。