動画をレスポンシブ対応で上下左右中央に余白なしで設置する

動画をレスポンシブ対応で上下左右中央に余白なしで設置する方法です。

動画と言っても、mp4ファイルなどをvideoタグで設置したり、Youtubeをiframeで埋め込んだり、さまざまです。
設置した動画の左右や上下が欠けたり、レスポンシブに対応してなかったり、上付きで不自然に下部が欠けてたり、印象が悪いですよね。
そこで画面全体、メインビジュアル、モーダルなどに、良い感じで設置する方法を考えます。

videoタグを余白なしで上下左右中央に設置する方法

例えば、videoタグを画面全体やメインビジュアルの背景として設置します。
レスポンシブ対応で、余白なしで、上下左右中央配置が理想だと思います。
まず、HTMLです。

<div class="bg">
	<div class="video">
		<video src="video.mp4" autoplay muted loop></video>
	</div>
</div>

メインビジュアルに動画を設置すると仮定し、横100%、高さ300pxのエリアに描画する場合、以下のようにCSSを指定します。

.bg{
	position: relative;
	width: 100%;
	height: 300px;
}
.video{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
.video video{
	position: absolute;
	top: 50%;
	left: 50%;
	object-fit: cover;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
}

画面全体の場合、クラスbgのpositionを、fixedもしくはabsoluteにして、描画エリアを指定すればよいです。