使用Bootstrap+HTML+CSS制作图片作品集时视频错位自动播放问题求助

问题修复方案 #

1. 视频被图片覆盖问题修复 #

该问题由两个错误配置导致：

• .project-item 被设置为绝对定位，但父容器 #project 未设置相对定位和最小高度，导致图片脱离文档流飘到视口顶部，叠加在层级为z-index:-100的视频上方
• 你为#about、#project设置了白色背景，固定定位的视频本身就会被后续的白色区块覆盖

修改CSS代码如下：

/* 新增#project的基础配置 */
#project {
  position: relative;
  min-height: 500px; /* 可根据实际图片高度调整数值 */
}

/* 修改.project-item的定位属性 */
#project .project-item {
  position: relative; /* 替换原有position: absolute配置，其余属性保留 */
  overflow: hidden;
  margin-bottom: 25px;
  padding: 0;
  vertical-align: middle;
  text-align: center;
}

/* 如果不需要视频随滚动一直固定在背景，可把视频的定位改为绝对定位 */
#home video {
  position: absolute; /* 替换原有position: fixed配置，其余属性保留 */
  top: 50%;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  height: auto;
  width: auto;
  transform: translateX(-50%) translateY(-50%);
  background-size: cover;
  object-fit: cover;
  box-sizing: border-box;
  overflow: hidden;
  z-index: -100;
  transition: 1s opacity;
}

2. 关闭视频自动播放问题修复 #

直接修改HTML中的video标签，删除autoplay属性即可，不需要控制条也可同步删除controls属性：

<video muted="" loop="">
  <source src="images/video.mp4" type="video/mp4">
</video>

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