用<video>实现响应式视频背景需同时满足：固定定位铺满视口、object-fit: cover裁切、muted+autoplay绕过静音拦截；缺一即致黑边、变形、不播或层级错乱。
直接说结论：用 <video> 实现响应式视频背景，核心不是调宽高，而是三件事：强制定位铺满视口、object-fit: cover 控制裁切方式、加 muted + autoplay 绕过浏览器静音拦截。漏掉任意一项，都会出现黑边、变形、不播放或层级错乱。
video 元素必须用 position: fixed 或 absolute 定位
很多人设了 width: 100%; height: 100vh; 还是有黑边，根本原因是 <video> 默认是 position: static，它仍受文档流影响——比如 body 有默认 margin、父容器没占满视口、内容推挤导致高度塌陷。
- 必须写
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;（iOS Safari 地址栏收缩时可用height: 100dvh;） -
body { margin: 0; }必须加，否则左右/底部会漏白边 - 避免用
position: relative包一层再绝对定位 video——多一层嵌套就多一个干扰源，z-index 和 overflow 都可能出问题
object-fit: cover 必须作用在 video 元素自身上
object-fit 不是给父容器写的，也不靠 JS 计算缩放比。它只对设置了明确 width 和 height 的替换元素（如 <video>、<img>）生效。
- 正确写法：
video { width: 100%; height: 100%; object-fit: cover; } - 错误写法：把
object-fit写在.video-wrap上，或者只写width: 100%、不设height（此时 height 是 auto，object-fit失效） - 别用
object-fit: fill——它会强行拉伸，16:9 视频在 21:9 屏上人脸变宽，文字压扁，运动轨迹失真 - 需要微调裁剪区域？加
object-position: center top;，比如人物演讲视频让脸始终在可视区上方
autoplay 不生效？检查这四个 HTML 属性是否全写了
Chrome、Safari、Edge 全部强制要求：非用户手势触发的自动播放，必须同时满足静音 + 自动播放 + 循环 + 移动端内联播放，缺一不可。
立即学习“前端免费学习笔记（深入）”；
-
autoplay：HTML 属性，不是 JS 调play()；写成autoplay="true"没用，只写autoplay即可 -
muted：必须，否则 Safari 直接拒绝加载视频帧 -
loop：不然播完停在首帧或黑屏，破坏背景体验 -
playsinline：iOS Safari 必须，否则点开就跳全屏，背景效果彻底失效 - 额外建议：
poster属性配一张静态图，防视频加载前闪白
移动端 Safari 的 object-fit 渲染错位怎么处理
iOS 15+ 基本支持 object-fit，但仍有小概率第一帧不裁切、或滚动后错位。这不是 CSS 失效，而是 Safari 对 <video> 异步加载和渲染时机的 bug。
- 不要等 JS 加载完再操作 video，样式必须内联或尽早加载
- 加
preload="auto"提前加载元数据，减少首帧等待 - 真机测试时注意：iOS 模拟器常表现正常，但 iPhone 实机可能复现；若持续异常，可加一行
video.style.transform = 'scale(1)';强制重绘（仅作兜底） - 别依赖
object-position在 iOS 9–14 做精细控制，兼容性差，优先用 cover + 高质量构图视频源
最常被忽略的点是：把 object-fit 当成“万能填充开关”，却忘了它完全依赖 width/height 和定位行为。真正起作用的是三者组合——没有 position: fixed，object-fit 就在一块小区域里裁；没有 muted，连第一帧都看不到。写完记得在真机 Safari 和 Chrome 下各刷三次，看有没有闪、卡、跳或留边。
