Blog Details

Full page.

CSS

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

HTML

<video id="background-video" autoplay loop muted poster="https://domainaname.com/images/filename.png">
   <source src="https://domainname.com/filename.mp4" type="video/mp4">
</video>

Boxed in a div

CSS

<style>
.video-container {
    height: 300px;
    width: 100%;
    position: relative;
}

.video-container video {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  z-index: 0;
}

.video-container .caption {
  z-index: 1;
  position: relative;
  text-align: center;
  color: #dc0000;
  padding: 10px;
}
</style>

<div class="video-container">
   <video id="background-video" autoplay loop muted poster="">
      <source src="https://videofile.mp4" type="video/mp4">
      aria-label="label for video"
      aria-details="video is about">
   </video>
   <div class="caption">
      <h3>Responsive Video Background</h3>
   </div>
</div>