動画表示＋下地画像処理の練習＋備忘録です（ひとまずの状態）。

html構成

<div class="front_page_video_box">
<video playsinline muted autoplay loop preload controlsList="nodownload" oncontextmenu="return false;">
<source src="動画">
</video>
</div>

CSS構成

.box {
width: 100vw;
height: 200px;
background: url('画像');
background-repeat: no-repeat;
background-position: center 50%;
background-size: cover;
}
.box video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 50%;
overflow: hidden;
}

課題

とりあえず記述した、という状態です。
コードの最適解は不明です。