videoをhtml画面内に埋め込む

PC、スマホの可変で画角を変えたい場合
動画は、上下左右中央に配置。

<section id="movie">
	<video muted autoplay loop playsinline>
		<source src="movie01.webm">
		<source src="movie01.mp4">
		<img src="movie01.webp" alt="">
	</video>
</section>

playsinline スマホで動画を再生する際、全画面表示にせずインライン再生

#movie {
	position: relative;
	overflow: hidden;
	padding-bottom: percentage(5 / 10); //(画像高さ / 画像横幅)
	@include sm {
		padding-bottom: percentage(10 / 10);
	}
	@include xs {
		padding-bottom: percentage(15 / 10);
	}
	video {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		min-width: 100vw;
		min-height: 100%;
	}
}

video の min-width が 100% だと画面端に隙間が空くので 100vw にしている。