youtubeの埋め込み動画をレスポンシブ対応する方法

時々見かけるのが、フレームはしっかりレスポンシブ対応してるのに、更新コンテンツの中身がレスポンシブ対応しきれていないWebサイトです。
特に多く見かけるのがyoutubeなどの動画の埋め込みコードを記事などに設置したときにスマートホンなどで見ると、横に大きくはみ出してしまっていたり、横幅はレスポンシブ対応しているのに高さが固定で黒い枠が大きく出てしまっているようなページです。

今回はyoutubeなどの動画の埋め込みコードをcssでレスポンシブ対応する方法をご紹介します。

htmlはdivで囲むだけ

まずはhtmlの準備します。html側は非常に簡単です。youtubeで発行された埋め込みコードをdivで囲むだけです。

<div class="youtube">
<iframe width="560" height="315" src="埋め込みコード" frameborder="0" allowfullscreen></iframe>
</div>

CSSも仕組みを理解すれば簡単

先にCSSを紹介します。

.youtube{
position: relative;
padding-bottom: 56.25%;
}
.youtube iframe{
width: 100%;
height:100%;
position: absolute;
left: 0;
top: 0;	
}

このスタイルの肝は”padding-bottom: 56:25%;”の部分ですが、最近のyoutubeの埋め込みコードは16:9になっています。これを横幅を基準にすると1:0.5625となります。上下のpaddingに%を指定すると横幅に対して相対的な値を設定することができるので常にyoutubeを埋め込んだボックスの大きさは16:9を維持されます。
また”position: absolute;”を設定した要素に幅や高さを%で指定した場合は親要素のボックスの大きさに対して相対的な値を設定することができるので、これでiframeが常に16;9を維持した状態でとなりレスポンシブ対応が可能となります。

参考にしてみてください。