video加object-fit: cover仍有黑边，是因为该属性只控制内容裁剪方式，不解决容器未铺满视口的问题；必须清除body默认margin、用position: fixed+100vw/100dvh撑满、设display: block及width/height: 100%才能生效。
video加object-fit: cover为什么还是有黑边
因为object-fit: cover只管“内容怎么填”，不管“容器有没有铺满视口”。视频默认是行内替换元素，自带宽高、外边距和固有尺寸；如果父容器没强制占满100vw/100vh，或者没脱离文档流，那裁剪就发生在一块小区域里，不是全屏。
必须同时满足：
- body { margin: 0; }（清掉默认边距）
- 视频父容器或video自身设position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh;（100dvh比100vh更稳，避开 iOS 地址栏抖动）
- video设display: block; width: 100%; height: 100%; object-fit: cover;
- 漏掉display: block，部分浏览器下object-fit直接不生效
移动端视频不自动播或跳全屏怎么办
iOS Safari 和多数安卓 WebView 对背景视频播放限制极严，仅靠autoplay和muted不够。
必须在<video></video>标签上显式写齐：
- autoplay
- muted（建议写muted="true"更明确）
- playsinline（禁用原生全屏跳转）
- preload="metadata"（提前读取宽高比，防渲染抖动）
- loop（避免播完空白）
光靠 HTML 属性还不够：必须用 JS 在canplaythrough事件后立即调用video.play()。不能等DOMContentLoaded，否则可能被浏览器判定为非用户触发而拦截。
如何避免关键内容被object-fit: cover裁掉
object-fit: cover默认以视频中心为锚点裁切，但很多视频构图重心不在正中——比如人物站在画面下半部，就会被裁掉头部。
用object-position微调裁切基准点：
- object-position: 50% 30%（向上偏移，适合人物偏下的视频）
- object-position: 20% 50%（向左偏移，适合主体偏右的镜头）
- 避免用center top这类关键字值，兼容性差，百分比更可靠
注意：object-position调整的是视频自身的坐标系，不是容器。改完必须在真机（尤其 iPhone 竖屏）上实测，不同设备裁切结果可能不一致。
z-index: -1失效或遮挡内容怎么排查
z-index: -1不是万能的，它只在定位元素（position值为relative/absolute/fixed）上生效。如果video没设position: fixed，z-index直接被忽略。
更隐蔽的问题是层叠上下文干扰：
- 父容器有transform、opacity 、<code>filter等属性，会创建新层叠上下文，把z-index: -1锁死在该上下文内
- body或上层容器设了overflow: hidden，可能意外裁掉fixed元素边缘
- 横向滚动条未隐藏：body { overflow-x: hidden; }必须加，否则100vw可能撑出滚动条，导致右侧漏白
真正安全的做法是：让video自己成为fixed根元素，不嵌套在复杂布局容器里；所有样式直接作用于<video></video>，减少中间层干扰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
