HTML页面封面循环背景视频不工作，仅显示控件其余区域空白

• video标签设置了固定宽高width="320" height="240"，仅会显示为小尺寸区域，剩余页面自然为空白
• 自定义属性data-height="fullscreen"没有对应CSS逻辑支撑，外层section不会自动撑满全屏，父容器高度不足导致无法实现全屏背景效果
• opacity= 50是无效写法，HTML原生属性没有opacity配置，透明度需要通过CSS设置，合法取值为0-1之间的小数
• 视频元素默认为行内块级元素，没有定位配置的情况下不会自动铺满父容器，也无法置于内容下层作为背景层
• controls属性会渲染浏览器默认的视频控制条，背景视频场景下不需要该配置

第一步 修正HTML代码 #

移除无效属性、不需要的控制条属性和固定宽高配置：

<section id="portfolio-cover">
   <div class="video-wrapper">
     <video id="background-video" playsinline autoplay muted loop>
       <source src="chicago.mp4" type="video/mp4">
     </video>
     <!-- 此处可插入需要叠加在视频上方的页面内容 -->
   </div>
</section>

第二步 新增配套CSS样式 #

实现全屏铺满、背景层级、透明度等效果：

/* 清除默认边距避免页面留白 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#portfolio-cover {
  width: 100vw;
  height: 100vh; /* 撑满整个浏览器视口高度，实现全屏效果 */
  overflow: hidden; /* 裁剪视频超出部分避免出现滚动条 */
  position: relative;
}

.video-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

#background-video {
  /* 居中铺满父容器，保持视频原始比例 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1; /* 置为最底层，不遮挡上层内容 */
  opacity: 0.5; /* 按需调整透明度，0为完全透明，1为完全不透明 */
}

• 确保视频文件chicago.mp4和HTML文件在同一目录，或者填写正确的相对/绝对路径，避免视频加载失败
• 目前主流浏览器都要求自动播放的视频必须为静音状态，代码中保留muted属性即可保证自动播放正常生效
• 如果确实需要显示控制条，再给video标签加回controls属性即可

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