YouTube(iframe)/縦横比固定/レスポンシブ

---

YouTube(iframe)がレスポンシブ表示されない

YouTubeの動画をそのまま埋め込むとレスポンシブで表示できなかった（高さがでない）ので、iframeとそれを囲う要素の2つにスタイルを指定します。

レスポンシブしない…。高さが出ない…。

iframeを囲うスタイル

img要素のように、縦横比固定で変わるように指定する。

HTML

<section class="youtube">
<iframe width="640" height="360" src="https://www.youtube.com/embed/埋め込む動画" frameborder="0" allowfullscreen></iframe>
</section>

CSS

.youtube{
position: relative;
width: 100%;/*横幅いっぱいにwidthを指定*/
height:0px;/*高さはpaddingで指定するため0*/
padding-top: 56.25%;/*高さを指定（padding-bottomでも同様)*/
}

親ブロックに対して横幅いっぱいに表示するためにwidthは100％にします。(marginやborderを使いたい場合は親ブロックに指定する)
heightを%指定しても、親ブロックの高さに左右されてしまいます。
padding-topやpadding-bottomの%指定は親ブロックの幅が基準になるのでpaddingで高さを出します。
YouTubeの画角は16:9なので縦幅は56．25%となります。
これで横幅が変わっても常に16:9の比率を保持することができます。

iframeにスタイルを指定する

絶対指定をします。

CSS

.youtube{
position: relative;
width: 100%;
height:0px;
padding-top: 56.25%;
}

.youtube iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

レスポンシブした！高さが出た！

widthとheightの指定によってiframeに記述されていてたwidth属性とheight属性の値に関係なく、レスポンシブ表示されるようになります。