基于HTML5和CSS实现非固定附着背景视频的技术咨询

Got it, let's get that background video scrolling with your page instead of staying fixed—super easy tweak once you know where to look!

First, let's clarify: when background videos end up fixed, it's almost always because the video element (or its container) is set to position: fixed. To make it scroll with the rest of the content, we need to anchor it to a normal, flow-positioned container instead.

Here's a complete, working implementation:

HTML Structure #

<!-- Wrap your video and content in a section/container that scrolls with the page -->
<section class="video-section">
  <!-- Background video -->
  <video class="background-video" autoplay muted loop playsinline>
    <source src="your-video.mp4" type="video/mp4">
    <!-- Fallback poster image for unsupported browsers -->
    <img src="video-poster.jpg" alt="Video fallback">
  </video>

  <!-- Your content that sits on top of the video -->
  <div class="section-content">
    <h1>This Content Scrolls With the Video!</h1>
    <p>Scroll down and watch the video move along with everything else.</p>
  </div>
</section>

<!-- Add more content below to test scrolling -->
<section class="other-content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <!-- Add enough text to make the page scroll -->
</section>

CSS Styling #

.video-section {
  /* Make this container a normal part of the page flow */
  position: relative;
  /* Set a height (adjust based on your needs) */
  min-height: 80vh;
  overflow: hidden; /* Crop video if it overflows the container */
}

.background-video {
  /* Anchor the video to its parent container */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Ensure the video covers the container without stretching */
  object-fit: cover;
  /* Send the video behind your content */
  z-index: -1;
}

.section-content {
  /* Position content on top of the video */
  position: relative;
  z-index: 1;
  color: white;
  text-align: center;
  padding: 4rem 2rem;
}

.other-content {
  min-height: 100vh;
  padding: 2rem;
  background: white;
}

Key Fixes Explained #

• No position: fixed on the video/container: By using position: absolute on the video inside a position: relative container, the video stays tied to the container's position in the page flow. When the container scrolls, the video scrolls with it.
• object-fit: cover: Ensures the video scales properly to fill the container without distortion.
• Z-index management: The video gets z-index: -1 to sit behind your content, while the content has a higher z-index to stay visible.

Quick Troubleshooting Tips #

• If your video still acts fixed, double-check that no parent element has position: fixed applied.
• For mobile browsers, add playsinline to the video tag to prevent fullscreen auto-play (required for iOS).
• Always include a poster image as a fallback for browsers that don't support video.

内容的提问来源于stack exchange，提问作者Anoop Chauhan