以前、YouTubeやVimeoからの埋め込み動画をレスポンシブにするjQueryプラグイン「FitVids.JS」をご紹介したんですが、今回はJSを使わずにCSSだけを使って埋め込まれた動画をレスポンシブに対応させるTipsが「Web Designer Wall」にあったのでご紹介します。CSSで完結できるならそれに越したことはないですよね。
[ads_center]
やり方
まずはCSSです。親要素にはposition: relative、子要素にはposition: absoluteでwidthとheightともに100%を指定する必要があります。
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTMLはYouTubeなどから埋め込まれた要素をvideo-containerのクラスを付けた要素で内包します。
<div class="video-container">
<!-- ここにYouTubeやVimeoの埋め込みコード -->
</div>
CSSだけで埋め込み動画をレスポンシブにすることができるなら、JSなどを読み込まなくていい分、軽量になるので嬉しいですね。とても参考になりました。
参考サイト
