object-fit: cover 是实现全屏背景视频不拉伸、不变形的唯一可靠方式，需配合 position: fixed、width: 100vw、height: 100dvh、top: 0、left: 0 及 preload="metadata"、muted、playsinline 和 JS play() 调用，并注意 object-position 微调、poster 封面、z-index 与 viewport 元标签适配。
object-fit: cover 是实现全屏背景视频不拉伸、不变形的唯一可靠方式。用 background-image 加视频路径？浏览器直接忽略——CSS 根本不支持视频作为背景。
为什么 object-fit: cover 必须配合 position: fixed 和明确尺寸
视频元素默认是流内内容，会受文档流、父容器 padding/margin、滚动影响。object-fit 只控制“内容如何填进盒子”，不负责“盒子本身有多大”。所以必须手动切断它和布局的关系：
-
position: fixed让视频脱离文档流，锚定视口左上角 -
width: 100vw; height: 100dvh（推荐dvh而非vh，避免 iOS Safari 地址栏缩放导致高度塌陷） -
top: 0; left: 0确保无偏移 - 父容器不需要设任何样式，甚至可以删掉——
<video></video>自己就是全屏根元素
preload="metadata"、muted 和 JS play() 缺一不可
移动端浏览器禁止自动播放有声视频，且首次加载若不预取元数据，object-fit 可能因尺寸未知而短暂失效（尤其在 height: 100dvh 下）：
-
preload="metadata"让浏览器提前读取宽高比，避免渲染抖动 -
muted是绕过静音策略的硬性要求，即使你后续用 JS 解除静音，也得先带这个属性 -
playsinline防止 iOS 全屏播放（Safari 默认行为） - 必须用 JS 立即调用
video.play()，不能等DOMContentLoaded，最好在load或canplaythrough后触发
常见错误：裁切错位、关键内容被切掉
object-fit: cover 默认从图片/视频中心裁切，但很多视频构图重心不在正中。这时要配合 object-position 微调：
立即学习“前端免费学习笔记（深入）”；
-
object-position: 50% 30%把焦点往上移，适合人物在画面下半部的视频 - 不要写成
object-position: center top—— 这个值只在部分浏览器生效，百分比更稳 - 如果视频关键区域在左侧，用
object-position: 20% 50%向左偏移 - 注意：该偏移是相对于视频自身坐标系，不是容器；改了
object-position后，务必在不同设备上实测裁切结果
兼容性和首屏体验容易被忽略的点
IE 完全不支持 object-fit，但更隐蔽的问题在现代浏览器里：
- 视频加载完成前，
<video></video>默认显示黑块或第一帧，且此时object-fit不起作用——建议加poster属性指向一张高质量封面图 -
z-index: -1是安全做法，但若页面有transform或will-change的父层，可能创建新层叠上下文，导致视频被遮挡；此时改用z-index: -1+isolation: isolate更稳妥 - 别忘了在
加<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">，否则 iPhone X+ 的刘海区会强制留白，100dvh失效
