MP4背景画像で画面一杯に

参考サイトは以下
https://designsupply-web.com/media/programming/4190/

HTML
<div class="bg-video-wrap">
  <video src="<?php bloginfo('stylesheet_directory'); ?>/img/movie.mp4" loop muted autoplay> </video>
  <div class="overlay">
    <div class="maincopy">
      <div class="maincopy1">人と街。大切な未来へ。</div>
      <div class="maincopy2">TOMOKIgroupは常に未来を見据え<br>
        技術の習得・人材の育成など明日へ繋げていく<br>
        企業努力をしていきたいと思っています。</div>
    </div>
  </div>
</div>

CSSは以下

.bg-video-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  background: url(./sapmle.png) no-repeat center center/cover;
}
video {
  min-width: 100%;
  min-height: 100vh;
  z-index: 1;
}
.overlay {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background-image: linear-gradient(45deg, rgba(0,0,0,.3) 50%, rgba(0,0,0,.7) 50%);
    background-size: 4px 4px;
    z-index: 2;
    text-align: center;
}

.maincopy{
    position: absolute;
    top: 40%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%); /* Safari用 */
    transform: translate(-50%, -50%);
 
    font-family: "Sawarabi Mincho";
   
}

.maincopy1{
    font-size: 400%;
    margin-bottom: 45px;
    color: #fff;
}

.maincopy2{
    font-size: 140%;
    line-height: 200%;color: #fff;
}