JSFiddle - React, Tailwind, and code Playground

by Craig Haywood

HTML

<script src="https://www.youtube.com/iframe_api"></script>

<video  id="background-video" autoplay loop muted poster="https://cdn.reallysmart.art/bg.webp">
<source src="https://cdn.reallysmart.art/bg3.mp4" type="video/mp4">
</video>
<div class="mydiv">

</div>

CSS

#background-video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}


.mydiv2{
  background-color: rgba(0,0,0,.5);
  position: absolute;
  z-index: 10 ! important;
  width: 100vw;
  height: 100vh;
  top: 0
}