通常、YoutubeをiFrameで埋め込むと、大きさが固定されてしまいますが、埋め込んだYoutube部分を、横幅いっぱいに(100%に)広げる方法をご紹介します。
ブログなどで、最大で表示したいときに必須ですね。
まずは、例から
HTML
<div class="youtube-wrapper"> <iframe> ... </iframe> </div>
CSS(スタイルシート)
<style> .youtube-wrapper{ width:100%; height:0; padding-bottom:56.25%; position:relative } .youtube-wrapper iframe{ width:100%; height:100%; position:absolute; top:0 left:0 } </style>
少しだけ解説すると、
.youtube-wrapper 指定した、{height:0}, {padding-botttom:56.25%}がポイントで、「height:100%」は親要素のheightに対して100%、一方のpadding-bottomは、親要素の(#)width値に対して、100%の値を取ります。(これは「仕様」です。)
ですので、横幅を1としたとき縦幅が、0.5625になってくれる。すなわち16:9のアスペクト日が実現できるというわけです。このようなアクペクト比の固定方法は、昨今のWEBコーダーにとっては、必須の知識となっています。
(#)正確には「親要素の」ではないんですが、そう思っていただいたほうが話が早いので割愛します。
このようなことは仕様書で定義されていますが、読みたい人はあまりいないと思います。
https://www.w3.org/TR/CSS21/visudet.html
また正確には、この横幅にあわせて伸び縮みする状態は「レスポンシブ(Responsive)」でなく「イラスティック(Elastic)」などと呼ばれますが、まあ、細かいのでこれの説明も割愛します。気になる人はぐぐってみてくださいね。