【HTML.CSS】HTMLに動画を埋め込む

HTML

<div class="wrap-video">
 <div class="text">
   <p>full screen video !</p>
   <p class="headline">背景に動画を表示してみる</p>
 </div>
 <video src="videos/video1.mp4" muted autoplay loop></video>
</div>

CSS

// video------------------------------------------
.wrap-video{
 position:relative;
}
.wrap-video video{
 width: 100%;
 height:100%;
 height:700px;
}
.wrap-video .text{
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%); /*上下左右中央寄せ*/
 text-align:center;
}
.wrap-video .text p{
 font-size:16px;
 font-weight:bold;
 color:white;
}
.wrap-video .text .headline{
 font-size:20px;
}

Mp４ファイルはPublicフォルダに保存

パスは　src="videos/video1.mp4"