とあるWebサイトを作成中。header部分に動画を埋め込む際の自分への備忘録です。バタバタとしており、絵の方は最近進んでおりません。

html

<div class="video-test">
 　<video src="movie.mp4" muted autoplay loop>
   <img src="#" alt="Placeholder" />
   </video>
</div>

CSS

.video-test {
    position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
    overflow: hidden;
    height: 100vh;
  }
  video{
    width: 100vw;
    height: 100vh;
    object-fit: cover;
  }
header{
    height: 100vh;
}

とあるサイトを１から作成中。JavaScriptを多用したサイトになる予定です。