Video as div background in pure css and html

I updated my question and code here so it hopefully makes more sense. Essentially, I need to replace the .video div (with the image) to a video instead of an image. I need to keep to blue overlay and everything else but change it from an image to a video. I already tried adding

<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>

but it didn't seem to work. Anything to get this working?

<style>
.front {
  background-color:blue;
  height: 91vh;
  position: relative;
  z-index: 2;
  width:100%;
}

.video {
  background: url(https://picsum.photos/id/107/800/800) center/cover;
  height: 100vh;
  margin-top: -100vh;
  position: sticky;
  width:100%;
  top: 0;
}

.container {
  height:200vh;
}

body {
  margin: 0;
}
</style>

<div class="container">
  <div class="front"></div>

  <div class="video"></div>
</div>

<div style="height:150vh"> more content later </div>

from Video as div background in pure css and html