To add a video background to a web page, the key is to use the HTML

It is quite common to add a video background to the web page now, such as the full screen animation effect of the home page, the atmosphere of the login page, etc. It is actually not difficult to implement, but there are several key points that need to be paid attention to, otherwise there may be problems such as not playing the video, misalignment of layout, or loading too slowly.

Basic structure: Use <video></video> tag as background

HTML itself does not have the property of "background video", and is not as direct as CSS's background-image . So the usual practice is to use the HTML <video></video> tag and position it at the bottom of the page as a visual "background".

The basic code structure is as follows:

 <div class="video-background">
  <video autoplay loop muted playsinline>
    <source src="your-video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>

<!-- The other content of the page is here->

Then use a little CSS to fill the entire screen:

 .video-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -100;
}

.video-background video {
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
}

This allows the video to fill the entire page and always beneath other content.

Video selection and optimization: Don't ignore performance and compatibility

Although the results have been achieved, there are several areas that are prone to problems that need to be paid attention to:

• Video format : .mp4 is recommended to use first because compatibility is the best. If you are particularly concerned about browser support, you can also add WebM format.
• Automatic playback : Many browsers on mobile do not allow automatically playing videos with sound by default, so you must add muted and playsinline attributes.
• Size control : The video is too large (such as a few hundred MB) will seriously affect the loading speed. It is recommended to compress it, keep it at a few dozen MB.
• Loop play : Adding loop can make the video seamless loop, avoiding the screen stuck or black screen.

To give a small example:

 <video autoplay loop muted playsinline>
  <source src="bg.mp4" type="video/mp4">
  <source src="bg.webm" type="video/webm">
  Sorry, your browser doesn&#39;t support videos.
</video>

Flexible applications in multiple scenarios

In addition to full-screen background video, you can also use it in local areas, such as a section or banner block. You only need to adjust the size of the container, and you don't have to use position: fixed .

For example, make a block with a local video background:

 <section class="hero-section">
  <div class="video-wrapper">
    <video autoplay loop muted playsinline>
      <source src="section-bg.mp4" type="video/mp4">
    </video>
  </div>
  <div class="content">
    <h1>Welcome to Our Site</h1>
    <p>This is the main content. </p>
  </div>
</section>

CSS is adjusted to relative positioning, covering only the current block:

 .hero-section {
  position: relative;
  height: 500px;
}

.video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.video-wrapper video {
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
}

This can achieve a richer sense of page hierarchy without affecting overall performance.

Basically that's it. Adding video background with HTML is not complicated, but some details are easy to ignore, such as automatic playback restrictions, video formats, performance optimization, etc. As long as you pay attention to these issues, you can create a beautiful and stable web page background.

The above is the detailed content of How to add a video as a background in HTML?. For more information, please follow other related articles on the PHP Chinese website!