如何创建占满初始视口的视频背景区块并允许内容置于其下？

嘿，这个效果我之前做过好多次，完全匹配你要的全屏视频背景+滚动看下方内容的需求，直接给你最靠谱的实现方案：

用100vh确保视频区块占满初始视口，配合object-fit: cover让视频完美覆盖容器不拉伸，再通过绝对定位让视频居中，最后让下方区块自然跟随即可。

1. HTML结构（简洁明了） #

先搭好基础结构，视频容器+视频元素，下面放其他内容区块：

<section class="video-hero">
  <!-- 视频标签：autoplay/muted是浏览器自动播放的必要条件 -->
  <video autoplay muted loop playsinline class="bg-video">
    <source src="your-video.mp4" type="video/mp4">
    <!-- 可选：添加WebM格式兼容更多浏览器 -->
    <source src="your-video.webm" type="video/webm">
  </video>
  
  <!-- 可选：如果要在视频上叠加文字/按钮，加这个容器 -->
  <div class="hero-content">
    <h1>你的页面标题</h1>
    <p>这里可以放副标题或者CTA按钮</p>
  </div>
</section>

<!-- 下方的滚动内容区块 -->
<section class="content-section">
  <div class="container">
    <h2>滚动后看到的内容</h2>
    <p>这里可以放任意你需要的内容，会自动跟在视频区块后面，滚动就能看到</p>
    <p>更多内容...</p>
  </div>
</section>

2. CSS核心样式（关键代码拆解） #

这部分是实现效果的核心，每一行都有作用：

/* 先重置默认样式，避免浏览器自带的边距打乱布局 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.video-hero {
  /* 关键：占满当前视口的高度，窗口resize时自动适配 */
  height: 100vh;
  width: 100%;
  position: relative;
  /* 隐藏视频超出容器的部分，避免出现滚动条 */
  overflow: hidden;
}

.bg-video {
  /* 绝对定位让视频铺满整个容器 */
  position: absolute;
  top: 50%;
  left: 50%;
  /* 平移居中，确保视频无论比例如何都能居中显示 */
  transform: translate(-50%, -50%);
  /* 核心：保持视频比例的同时覆盖整个容器，不会拉伸变形 */
  object-fit: cover;
  /* 确保视频至少填满容器，避免小视频出现黑边 */
  min-width: 100%;
  min-height: 100%;
  /* 把视频放在底层，让叠加内容显示在上面 */
  z-index: 0;
}

/* 如果有叠加内容，设置层级高于视频 */
.hero-content {
  position: relative;
  z-index: 1;
  color: #fff;
  text-align: center;
  /* 简单实现垂直居中，也可以用flex布局 */
  padding-top: 40vh;
}

/* 下方内容区块正常设置样式即可 */
.content-section {
  padding: 6rem 2rem;
  background-color: #fff;
  color: #333;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

3. 关键细节说明 #

• 100vh：这个单位是当前视口高度的100%，不管窗口怎么缩放，视频区块都会刚好占满屏幕，滚动后才会看到下面的内容，完全符合你要的效果。
• object-fit: cover：这是避免视频拉伸变形的关键，它会裁剪视频的边缘来匹配容器比例，同时保持视频的清晰度，和你参考的网站效果一致。
• autoplay muted：现在主流浏览器都要求视频静音才能自动播放，所以muted是必须的；loop让视频循环播放，playsinline确保在移动端不会自动全屏播放。

4. 额外优化建议 #

• 视频压缩：尽量把视频体积压小（比如用H.264编码，分辨率设为1080p以内），避免页面加载太慢影响体验。
• 降级方案：给.video-hero加个背景图片，当浏览器不支持视频或者加载失败时显示：

  .video-hero {
    /* 其他样式不变 */
    background: url('fallback-image.jpg') no-repeat center center/cover;
  }
  

• 性能优化：可以给视频加preload="metadata"，只加载视频元数据，减少初始加载量；或者根据网络状态控制视频播放（比如用JS判断是否是移动网络，再决定是否自动播放）。

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