如何修改竖屏背景视频实现浏览器自适应全屏覆盖？

直接用下面的配置就能实现你要的效果，同时要确保父容器的基础样式正确：

完整代码示例 #

HTML

<video class="bg-video" autoplay muted loop playsinline>
  <source src="你的竖屏视频路径.mp4" type="video/mp4">
</video>

CSS

/* 重置body默认样式，消除边距和滚动条 */
body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
}

.bg-video {
  position: fixed; /* 相对于视口固定，避免页面滚动时视频偏移 */
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover; /* 保持视频比例，裁剪超出部分实现全屏覆盖 */
  z-index: -1;
}

关键调整说明 #

• 用position:fixed替代absolute：固定定位能让视频始终贴合浏览器视口，不会因为页面滚动偏移
• min-width:100% + min-height:100%：保证视频最小尺寸填满视口，配合width:auto和height:auto保留视频原始比例
• 给body设置margin:0和overflow:hidden：消除默认边距，避免出现滚动条导致的黑边

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