Learn How to Create a full screen video background using HTML, CSS
Adding HTML
<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>
Adding CSS
body { margin: 0; padding: 0; } .videobg { position: relative; overflow: hidden; width: 100%; height: 100vh; background: url(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; }) 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; }
Output & Full Code :
How to Create a full screen video background using HTML, CSS
You may Also Like