object-fitを使って動画を要素にはめ込む - 未経験のwebサイト制作の勉強

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秒時点から最後まで再生

www.plusdesign.co.jp

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>object-fitを使って動画を埋め込む</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/object-fit-videos.min.js"></script>
<script>
$(function(){
//3秒たったら.svg-wrapperを0.6秒かけてフェードアウト
$('.svg-wrapper').delay(3000).fadeOut(600);
$('.curtain').delay(4000).slideUp(300);
});

</script>
</head>

<body>
<header>
<h1>ロゴ</h1>
<nav class="g-nav">
<ul>
<li><a href="#">Top</a></li>
<li><a href="#">Access</a></li>
<li><a href="#">Info</a></li>
</ul>
</nav>
</header>
<div class="main">
<video class="main-video" src="img/main.mp4" autoplay muted type="video/mp4" loop></video>
</div>
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>

<div class="curtain">
<p class="svg-wrapper" id="logo">

</p>
</div>
<script>
objectFitVideos();
</script>
<script>
$.ajax({
  url: 'img/logo.svg',//ここにsvgファイルのパスを入れる
  datatype: 'get',
})
.then(
// 1つめは通信成功時の処理
	function(data) {
	 var svg = $(data).find('svg');
    $('#logo').append(svg);
		},
// 2つめは通信失敗時の処理
	function(){
	alert('読み込み失敗');
  });
</script>
</body>
</html>

@charset "utf-8";
/* CSS Document */

html,body,video,h1,p,ul,li {
margin:0;
padding:0;
}
ul {
list-style:none;
}
a{
text-decoration:none;
}
img {
vertical-align:bottom;
}


/*PCレイアウト*/

header {
width:100%;
display:flex;
padding:0 15%;
box-sizing:border-box;
justify-content:space-between;
}
.g-nav>ul {
display:flex;
justify-content:space-between;
}
.g-nav li {
margin:0 10px;
height:80px;
}
.g-nav a {
display:block;
padding:49px 20px 15px;
color:#222;
box-sizing:border-box;
position:relative;
}
.g-nav a:hover {
opacity:0.7;
}
.g-nav a:before {
display:block;
content:"";
width:30px;
height:30px;
background:url(../img/top.svg) no-repeat center center/contain;
position:absolute;
top:15px;
right:0;
left:0;
margin:auto;
}
.g-nav li:nth-child(2)>a:before {
background:url(../img/access.svg) no-repeat center center/contain;
}
.g-nav li:nth-child(3)>a:before {
background:url(../img/info.svg) no-repeat center center/contain;
}

.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%;
}

/*ローディングアニメ*/
.curtain {
width:100%;
height:100vh;
background:#CCCCCC;
position:fixed;
top:0;
left:0;
z-index:100;
}
.svg-wrapper {
width:300px;
height:300px;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
.maru {
fill:none;
stroke:#000;
stroke-width:10px;
stroke-dasharray:950px;
stroke-dashoffset:950px;
animation: maru-anime 2s 0.5s linear forwards;
}
@keyframes maru-anime {
0%{stroke-dashoffset:950px;}
100%{stroke-dashoffset:0;}
}
@media (max-width:640px){
.main {
height:50vh;
}
}

logo.svg

<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewBox="0 0 310 310" enable-background="new 0 0 310 310" xml:space="preserve">
<circle class="maru" stroke-miterlimit="10" cx="155" cy="155" r="150"/>
</svg>

非常に便利なobject-fitですが、ブラウザーによってimg要素とvideo要素の扱いが違います。
caniuse.com
上記のようにEdgeはimg要素のみにしか適用しない為video要素に掛けたい場合は、専用のプラグインを入れる必要があります。
この「object-fit-videos」というプラグインを使う事で、Edgeでもvideo要素にobject-fitを掛けれるようになります。

github.com