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秒時点から最後まで再生
以前授業でやったSVGのアニメーションと動画を組み合わせた、インパクトのあるファーストビューを作ってみましょう。
photoshopvip.net
<body> <header> </header> <div class="main"> <video class="main-video" src="img/main.mp4" autoplay muted type="video/mp4" loop></video> </div>
.main {
width:100%;
height:100vh;
position:relative;
overflow: hidden;
}
.main-video {
object-fit:cover;
position:absolute;
top:0;
left:0;
object-position: left top;
font-family: 'object-fit: cover; object-position: left top;';
width:100%;
height:100%;
}
非常に便利なobject-fitですが、ブラウザーによってimg要素とvideo要素の扱いが違います。
Can I use… Support tables for HTML5, CSS3, etc
上記のようにEdgeはimg要素のみにしか適用しない為video要素に掛けたい場合は、専用のプラグインを入れる必要があります。
この「object-fit-videos」というプラグインを使う事で、Edgeでもvideo要素にobject-fitを掛けれるようになります。
github.com
コメント