動画埋め込み

<div class="top_area_area_box">
<div class="recruit_l js-scroll-l">
<div class="mv">
<div class="mv-wrap">
<div class="mv-bg"></div>
<video id="video" webkit-playsinline="" playsinline="" muted="" autoplay="" loop="" src="/img/move/01_2akarui.mp4"></video>
↓もしくは（オートプレイ無し　サムネイル画像付き）
<video id="video" webkit-playsinline="" controls playsinline="" muted="" poster="/img/move_poster.jpg" src="/move/gtex_move01.mp4"></video>
<p class="mv-txt">kasumiblog</p>
</div>
</div>
</div>

/* ここから */
.mv {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}

.mv-wrap {
position: relative;
height: 500px;
}

video {
display: block;
width: 100%;
height: 500px;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

.mv-bg {
display: block;
width: 100%;
height: 500px;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 30, 0, 0.2);
z-index: 1;
}

.mv-txt {
color: #fff;
font-size: 50px;
width: 100%;
height: 50px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 3;
margin: auto;
text-align: center;
}

.mv:after {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
background-image: radial-gradient(black 20%, transparent 20%),
radial-gradient(black 20%, transparent 20%);
background-size: 4px 4px;
background-position: 0 0, 2px 2px;
}