動画をレスポンシブに対応させるCSSのTipsがとても便利

以前、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などを読み込まなくていい分、軽量になるので嬉しいですね。とても参考になりました。

参考サイト

CSS: Elastic Videos