コーディング

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

2017.06.23

コーディング

時々見かけるのが、フレームはしっかりレスポンシブ対応してるのに、更新コンテンツの中身がレスポンシブ対応しきれていない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を維持した状態でとなりレスポンシブ対応が可能となります。

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

SHARE

この記事の筆者

Webクリエイター 古川 徹朗

Webクリエイター 古川 徹朗

Webに関する様々な知識を身に付け、理論的な問題解決を常に目指す頭脳派クリエイター。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。