How to create a full-screen video background with HTML5

To create a full-screen video background, you need to use the HTML5 <video> tag and combine CSS to achieve responsive coverage. First, add <video> elements with autoplay, muted, and loop attributes to HTML to ensure automatic loop playback and compatibility with browsers. Then, set position: fixed, width and height to 100% through CSS, and object-fit: cover to fill the viewport and crop it to avoid deformation. At the same time, set z-index: -1 Place the video at the bottom of the content. In order to improve performance and compatibility, static images should be provided as a downgrade fallback, optimize the video format to H.264 encoded MP4 and control the file size. For mobile terminals, you can hide the video on small screen devices through media queries and display the static background. Finally, by adding text shadows, translucent masks or relative positioning content layers, ensuring that the foreground text is clear and readable, thereby achieving a cross-device compatible and user-experienced full-screen video background effect.

To create a full-screen video background with HTML5, you need a combination of HTML and CSS that ensures the video covers the entire viewport while maintaining responsiveness and performance. Here's how to do it effectively.

Use the <video></video> Element with Proper Attributes

Start by adding the <video></video> tag in your HTML. This element will serve as the background, so it should be positioned behind your content and set to play automatically, loop, and ideally be muted (required for autoplay in most browsers).

 <video autoplay muted loop id="bg-video">
  <source src="your-video-file.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

• autoplay : Starts the video automatically.
• muted : Required for autoplay to work on most modern browsers.
• loop : Repeats the video continuously.
• id="bg-video" : Makes it easy to target with CSS.

Style the Video for Full-Screen Coverage

Use CSS to make the video fill the entire screen, regardless of device or screen size.

 #bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the video covers the area without distortion */
  z-index: -1; /* Sends the video behind other content */
}

/* Optional: Reset default margin and ensure full height */
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden; /* Prevent scrollbars due to video overflow */
}

• position: fixed keeps the video anchored to the viewport.
• object-fit: cover is key — it scales the video to cover the entire container, cropping if necessary, just like background-size: cover for images.
• z-index: -1 places the video behind all other elements unless they also have negative z-indices.

Add Fallback Content and Optimize Performance

Not all users will see the video due to slow connections, older devices, or accessibility needs. Plan accordingly.

• Provide a fallback image using CSS for slower connections or mobile data users:

 body {
  background-image: url('fallback-image.jpg');
  background-size: cover;
  background-position: center;
}

• Optimize your video file :

  • Use MP4 (H.264) format for broad compatibility.
  • Keep file size reasonable — compress with tools like HandBrake.
  • Consider shorter loops or lower resolution (eg, 720p) for better performance.

• Mobile considerations : Some mobile browsers don't support autoplay for videos, or users may prefer to avoid data usage. You might conditionally hide the video on mobile with JavaScript or serve a static background instead via media queries:

 @media (max-width: 768px) {
  #bg-video {
    display: none;
  }
  body {
    background-image: url('mobile-fallback.jpg');
    background-size: cover;
  }
}

Layer Content Over the Video

Make sure your text or UI elements are visible over the video. Use contrasting colors, semi-transparent overlays, or text shadows.

 <div class="content">
  <h1>Welcome to My Site</h1>
  <p>This text appears over the video background.</p>
</div>

 .content {
  position: relative;
  color: white;
  text-align: center;
  padding: 20px;
  z-index: 1;
}

.content h1 {
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}

A dark overlay can also improve readability:

 #bg-video::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Dark tint */
  z-index: -1;
}

Note: Pseudo-elements don't work directly on <video> , so wrap the video in a container if you want an overlay.

 <div id="video-container">
  <video autoplay muted loop>
    <source src="video.mp4" type="video/mp4">
  </video>
</div>

Then apply the overlay to #video-container .

That's it. With clean HTML, smart CSS, and a few optimizations, you can have an engaging full-screen video background that works across devices. Just remember to keep usability and performance in mind.

The above is the detailed content of How to create a full-screen video background with HTML5. For more information, please follow other related articles on the PHP Chinese website!