HTML页面插入视频出现周边留白、添加页脚后不居中问题如何解决？

问题根因 #

• 未重置浏览器默认的body边距，是无页脚时视频周边出现留白的核心原因
• 视频使用position: absolute定位时没有稳定的定位基准，添加页脚后文档流高度变化会导致定位偏移，出现无法居中的问题
• 写死的固定宽高没有做居中适配，视口尺寸和1366x768不匹配时就会出现位置异常

修改后的代码 #

HTML #

在原有video标签外层新增定位容器，隔离视频和页面其他元素的影响：

<div class="video-wrapper">
  <video autoplay muted loop id="myVideo">
    <source src="videos/bgvideo.mp4" type="video/mp4">
  </video>
</div>

CSS #

/* 全局样式重置，消除默认边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 视频定位容器，以视口为基准固定定位，不受页面其他元素影响 */
.video-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: -10000;
  overflow: hidden;
}

#myVideo {
  /* 基于父容器做绝对居中适配 */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* 保留原始视频尺寸，如需铺满视口可替换为下面三行代码
  width: 100%;
  height: 100%;
  object-fit: cover;
  */
  width: 1366px;
  height: 768px;
  display: block;
}

调整说明 #

• position: fixed让容器的定位基准始终为浏览器视口，添加页脚、页面内容高度变化都不会影响视频的位置
• transform: translate(-50%, -50%)配合left: 50%、top: 50%实现视频的绝对居中，无需手动计算偏移值
• 如果需要适配不同尺寸的屏幕，取消注释视频部分的铺满代码即可，视频会自动等比例铺满整个视口，不会出现留白或变形

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