object-fitプロパティは、置換要素(img要素やvideo要素など)をボックスにどのようにはめ込むかを指定する際に使用します。
- fill
置換要素(img要素やvideo要素など)をボックスサイズに合わせて縦横比を維持しないでリサイズして、全体が見えるようにはめ込む(初期値)
- contain
置換要素(img要素やvideo要素など)をボックスサイズに合わせて縦横比を維持しながらリサイズして、全体が見えるようにはめ込む
- cover
置換要素(img要素やvideo要素など)をボックスサイズに合わせて縦横比を維持しながらリサイズして、トリミングしてはめ込む
- none
置換要素(img要素やvideo要素など)をリサイズしないで、ボックスサイズでトリミングしてはめ込む
- scale-down
置換要素(img要素やvideo要素など)のサイズとボックスサイズの小さい方に合わせて、縦横比を維持しながらリサイズして、全体が見えるようにはめ込む。 言い換えれば、指定するボックスサイズと置換要素の実寸サイズの大小関係に応じて contain または none を指定したときと同じ表示となる
video要素を使う際に気をつけないといけないので、動画を自動再生する場合、OSやブラウザーのバージョンによって仕様がバラバラなので、必ず事前にチェックしましょう。
再生範囲を指定する
videoタグ(及びaudioタグ)では、下記の書き方をすることで再生範囲を指定することが出来ます。
<video src="movie.mp4#t=[starttime][,endtime]"></video>
※Edge・IEは、今のところ未対応
【使用例】
「movie.mp4#t=5,10」5秒時点から10秒時点の範囲を再生
「movie.mp4#t=,8」始点から8秒時点の範囲を再生
「movie.mp4#t=,01:30:00」始点から1時間30分の範囲を再生
「movie.mp4#t=5」5秒時点から最後まで再生
<div class="wrapper"> <video src="img/Turntable.mp4" autoplay muted loop> </video> </div>
.wrapper { width: 100%; height: 100vh; position: relative; overflow: hidden; } video { object-fit: cover; position: absolute; height: 100%; width: 100%; top: 0; left: 0; }