video设为全屏背景时object-fit:cover未生效，因video默认行内元素且有固有尺寸；需设父容器100vw/100vh、video为display:block并显式宽高100%、加position:absolute或fixed及overflow:hidden，同时注意autoplay muted playsinline、兼容性及性能优化。
video元素设为全屏背景时，object-fit: cover 为什么没生效？
因为 video 默认是行内元素，且自带宽高、外边距和固有尺寸约束；直接加 object-fit: cover 不会自动撑满视口，必须配合显式尺寸控制和定位策略。
- 确保父容器（如
或包裹<video></video>的<div>）设置了 <code>width: 100vw; height: 100vh; -
video自身需设为块级：display: block;，否则object-fit在行内元素上行为不可靠 - 必须显式设置
width: 100%; height: 100%;，让object-fit有作用域可依 - 推荐加
position: absolute; top: 0; left: 0; z-index: -1;避免影响文档流和其他内容布局 - 给
video的父容器（比如一个<div class="bg-video">）设 <code>position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; overflow: hidden; -
video内部设width: 100%; height: 100%; object-fit: cover; display: block; - 避免用
min-height: 100vh—— 它会让容器高度随内容增长，破坏“始终全屏”的前提 - 移动端注意：iOS Safari 对
autoplay和playsinline有强限制，漏掉playsinline会导致全屏强制跳转 -
黑边/未覆盖：检查是否遗漏
width: 100%; height: 100%;在video上，或父容器未设overflow: hidden -
滚动错位：用了
position: absolute但父容器没有position: relative或fixed，导致定位上下文错误；应统一用fixed -
首帧空白/不自动播：确保
<video></video>含autoplay muted playsinline属性；Safari 要求muted才允许静音自动播 -
加载慢/卡顿：视频源优先用
.mp4（H.264），避免.webm在 iOS 上不支持；考虑加preload="metadata"或"auto" - 移动端务必测试横竖屏切换：部分 Android 浏览器在 orientationchange 后不会重绘
object-fit，可监听事件并触发video.style.transform = 'scale(1)'强制重绘 - 避免把大视频（>5MB）直接作为首页背景——建议压缩至 2–3MB，分辨率控制在 1280×720 或适配视口宽度即可
- 如果页面有文字/按钮叠加在视频上，记得给它们设
position: relative; z-index: 10;，否则可能被z-index: -1的视频盖住
如何让背景视频真正“覆盖”整个视口且不拉伸变形？
object-fit: cover 是对的，但仅靠它不够——关键在「参考尺寸来源」。它的裁剪基准是元素自身的盒模型尺寸，不是视口本身。
常见报错或异常表现及对应修复
典型现象包括：黑边明显、视频只显示左上角一小块、滚动时背景错位、首帧卡住不播放。
兼容性与性能注意事项
object-fit 在 IE 中完全不支持，Edge 16+ 支持；若需兼容旧环境，只能回退到 background-image + JS 动态缩放模拟，代价高且效果差。
video 元素仍可能因父容器存在 padding 或 border 导致内部 100% 计算偏差——建议用 box-sizing: border-box 统一处理。
