Est. reading time: 1 minutes
Quick Answer: You can create a full-page video background by using a combination of proper HTML5 attributes and modern CSS layout properties like object-fit: cover and position: fixed.
/* Style the video to span the entire screen background */
#bg-video {
background: rgba(0, 0, 0, 0.4);
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 1500px;
object-fit: cover;
z-index: -1;
}
/* Layer your text and elements on top of the video */
.content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
color: #ffffff;
text-align: center;
background: rgba(0, 0, 0, 0.4);
}
video tag id="bg-video" autoplay="autoplay" loop="loop" muted="" width="300" height="150"
source tag src="Your-Video-Background-Goes-HERE.mp4" type="video/mp4" source tag
video tag