[CSS]object-fitの賢い使い方: インラインの動画を背景画像のようにブラウザいっぱいに表示するテクニック

HTML内にインラインで配置した動画や画像を、背景画像のようにブラウザいっぱいに表示するCSSのテクニックを紹介します。

レスポンシブに完全対応、スマホでもデスクトップのあらゆるサイズのスクリーンでも最適なサイズで表示されます。

デモのキャプチャ

※キャプチャ画像は静止画ですが、実際は動画です。

object-fitを使って動画をブラウザいっぱいに表示

実際の動作は、デモページでご覧ください。

デモのキャプチャ

Daily Pen #80

横長のスクリーンでも、動画は最適なサイズで表示されます。
上と比較して、岸の両横が見えていることに注目です。

デモのキャプチャ

横長サイズで表示

横を小さくしてもちょうどよくクロップして表示されますが、スマホサイズの小さいスクリーンでは高さを半分にして、全体を表示するように設定されています。

デモのキャプチャ

スマホサイズで表示

object-fitの実装方法

HTML

HTMLはシンプルで、video要素を使って動画を配置します。

CSS

video要素に「object-fit: cover;」を指定し、スマホで半分の高さにするには親コンテナで指定します。

object-fitのサポートブラウザ

object-fitのサポートブラウザは、下記の通りです。
2017年5月現在、IE, Edgeを除く、すべてのブラウザにサポートされています。

サイトのキャプチャ

object-fitのサポートブラウザ

※Edgeでは近いうちにサポートされるようです。現在は、高い優先度で開発中とのこと(参考: developer.microsoft.com

object-fitをIEで使う

IEで利用できないのなら使えないじゃん! とお嘆きの人には、下記のスクリプトが便利です。

fitieはIEでもobject-fitが利用できるようにするもので、画像や動画、その他の埋め込み可能なメディア形式をサポートしています。

サイトのキャプチャ

fitie -GitHub

使い方は簡単で、外部ファイルとして記述するだけです。

CSSは他のブラウザと同じ記述で、OKです。

sponsors

top of page

©2018 coliss