CSS实现背景视频全屏显示的正确设置方法

你现有写法缺少核心适配属性和必要的全局样式重置，按以下步骤调整即可实现无变形全屏铺满效果：

• 第一步：重置浏览器默认边距，避免视口边缘留白
  浏览器默认给html、body标签加了8px左右的margin，会导致视频铺不满边缘，先重置全局样式：

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  /* 不需要页面滚动时加下面这行，避免视频超出视口产生滚动条 */
  overflow: hidden;
}

• 第二步：补全视频元素的样式
  你之前的写法只设置了右下定位和最小宽高，缺了核心的object-fit规则和完整定位约束，调整后的样式如下：

#myvideo{
  position: fixed;
  /* 四个方向都设为0，保证视频锚定整个视口 */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  min-width: 100%;
  min-height: 100%;
  /* 核心属性：让视频按比例缩放覆盖整个容器，不变形不留黑边 */
  object-fit: cover;
  /* 层级设为负数，保证视频在所有页面内容下方，作为背景存在 */
  z-index: -1;
}

• 常见异常排查
  • 如果加完样式还是有尺寸限制，检查是否有全局CSS给视频等媒体元素设置了max-width/max-height属性，这类属性会限制视频最大尺寸，直接覆盖为max-width: none; max-height: none即可
  • 如果视频定位不是相对整个视口，检查视频的父级元素是否设置了transform、perspective或者filter属性，这类属性会让fixed定位的元素相对父级定位而非视口，把这类属性从父级移除即可
  • 如果不需要保持视频原始比例、要完全拉伸铺满视口，把object-fit的值改成fill即可，但这种方式会导致视频变形，一般不推荐使用

内容的提问来源于stack exchange，提问作者Utku karagül