设置视频为section全屏背景失败，求技术解决方案

问题根源 #

• object-fit: cover 被应用在 .vid 这个div元素上，但该属性仅对替换元素（如video、img）生效，div作为块级元素无法识别这个样式。
• .vid 是绝对定位元素，但未设置宽高为100%，导致它的尺寸没有占满父级section，视频的min-width/min-height是相对于这个div的自然尺寸，无法撑满全屏。
• body默认存在margin，可能导致section周围出现留白，视觉上看起来未全屏。

修正后的代码 #

CSS

/* 重置默认边距，消除页面留白 */
body {
  margin: 0;
  padding: 0;
}

section {
  display: block;
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
}

.homepage {
  overflow: hidden;
  position: relative;
}

.vid {
  position: absolute;
  top: 0;
  left: 0;
  /* 让容器占满整个section */
  width: 100%;
  height: 100%;
}

.vid video {
  width: 100%;
  height: 100%;
  opacity: 0.7;
  /* 视频铺满容器且保持比例，不会拉伸变形 */
  object-fit: cover;
}

HTML

<div data-spy="scroll" data-target=".navbar">
  <section class="homepage">
    <div class="vid">
      <video src="b.mp4" autoplay loop muted playsinline type="video/mp4"></video>
    </div>
  </section>
</div>

关键修改说明 #

• 重置body的margin和padding，确保section真正占据整个视口。
• 给.vid设置100%宽高，让它完全覆盖父级section。
• 将object-fit: cover直接应用到video标签，确保视频铺满容器的同时保持自身比例。
• 修正plays-inline为标准写法playsinline，提升兼容性。

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