【簡単CSS】videoタグを使って動画を背景に設定する方法

<div class="mv">
  <!--  メイン全体を囲うdiv  -->
  <div class="mv-wrap">
    <!--   薄いレイヤー   -->
    <div class="mv-bg"></div>
    <!--   videoタグ   -->
    <video id="video" webkit-playsinline="" playsinline="" muted="" autoplay="" loop=""
      src="http://kasumiblog.xsrv.jp/codepen/video/video.mp4"></video>
    <!--   動画の上に載せるテキスト   -->
    <p class="mv-txt">kasumiblog</p>
  </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;
}

.mv-bg {
  display: block;
  width: 100%;
  /* 背景画像の高さ */
  height: 500px;
  position: absolute;
  top: 0;
  left: 0;
  /* 薄いレイヤーの色 */
  background-color: rgba(0, 30, 0, 0.2);
  /* videoの上に乗せる */
  z-index: 2;
}

.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;
}