<div class="videobg">
    <video src="https://adaptabiz.com/wp-content/uploads/2021/05/Pexels-Videos-1234162.mp4" loop muted autoplay>
    </video>
    <div class="overlay">
    </div>
    <h1>Fullscreen video background
    </h1>
  </div>
 
  
body {
  margin: 0;
  padding: 0;
}
.videobg {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  background: url(https://adaptabiz.com/wp-content/uploads/2021/05/bgg.jpg) no-repeat center center/cover;
}
video {
  min-width: 100%;
  min-height: 100vh;
  z-index: 1;
}
.overlay {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background-image: linear-gradient(45deg, rgba(0,0,0,.3) 50%, rgba(0,0,0,.7) 50%);
  background-size: 3px 3px;
  z-index: 2;
}
h1 {
  text-align: center;
  color: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 3;
  max-width: 400px;
  width: 100%;
  height: 50px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.