video タグを使って背景に mp4 動画を流す

キービジュアル箇所などに背景動画を流すサンプルです。
HTML の video タグを使用して mp4 形式の動画を再生します。

フォールバック背景画像 ver.

動画が再生できない場合に備えて背景画像を敷いておくver.

HTML

<div class="keyvisual">
	<div class="movie">
		<video class="movie__video" webkit-playsinline playsinline muted autoplay loop>
			<source src="../ai.mp4" type="video/mp4">
		</video>
	</div>
	<div class="content">
		<p>コンテンツ</p>
	</div>
</div>

CSS

.keyvisual {
	height: 400px;
	position: relative;
}
.content {

	position: absolute;
	top: 0;
	right:0;
	left:0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;

}
.movie {
	background: url(../ai.jpg) no-repeat center center;
	background-size: cover;
	height: inherit;
	position: relative;
	overflow: hidden;
}
.movie__video {
	object-fit: cover;
	height: 100%;
	width: 100%;
}

フォールバック imgタグ ver.

動画が再生できない場合、imgタグの画像を表示するver.
背景動画では無く、動画をそのまま設置するバターンはこれが良いかもしれません。（デモは背景ですが）

デモページ

HTML

<div class="movie">
	<video class="movie__video" webkit-playsinline playsinline muted autoplay loop>
		<source src="../ai.mp4" type="video/mp4">
		<img src="../ai.jpg" alt="">
	</video>
</div>

CSS

.keyvisual {
	height: 400px;
	position: relative;
}
.content {
	position: absolute;
	top: 0;
	right:0;
	left:0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.movie {
	height: inherit;
	position: relative;
	overflow: hidden;
}
.movie__video {
	object-fit: cover;
	height: 100%;
	width: 100%;
}
img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

応用

ローディングアニメーションのあとにふわっと表示

デモページ