Make div background a video on page load

Tried to add a video as a background of the red div under the overlay but it didn't seem to work. Wondering if this is possible in pure html and css or if some form of Javascript is needed. Added the video and source tag filled with the proper file locations on my desktop and set z-index already but still doesn't seem to work. Wondering if this is possible? Anything helps, thanks again!

.overlay {    background-color:blue;    height: 91vh;    position: relative;    z-index: 2;  }    #video {    background-color:red;    height: 100vh;    margin-top: -100vh;    position: sticky;    top: 0;    z-index:-1;  }    .container {    height:200vh;  }    body {    margin: 0;  }

<div class="container">    <div class="overlay"></div>      <video id="video" poster="C:\Users\name\Desktop\poster.JPG" autoplay muted loop>    <source src="C:\Users\name\Desktop\footage.mp4" type="video/mp4">    </video>  </div>    <div style="height:50px"></div>

https://stackoverflow.com/questions/65526752/make-div-background-a-video-on-page-load January 01, 2021 at 09:39AM