要实现video真正全屏铺满，必须让其直接父容器用position: fixed覆盖视口，并清body margin，video设width/height 100%、object-fit: cover、display: block；ios需用100dvh或min-height: 100%防地址栏跳变。
直接给 video 加 object-fit: cover 不足以实现真正全屏铺满——它只管“怎么裁”，不管“容器有没有撑满视口”。黑边、留白、错位，90% 都是父容器没控好尺寸或定位导致的。
为什么 object-fit: cover 加了还是有黑边
浏览器先按 video 自身宽高比（比如 16:9）撑开父容器，再对内容做 cover 裁剪。如果父容器本身没强制占满视口（例如只是 width: 100% 但高度由内容决定），那裁剪前就已留空。
- 必须让
video的**直接父容器**脱离文档流、覆盖整个视口：position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; -
body默认有margin，要清掉：body { margin: 0; } -
video自身设width: 100%; height: 100%; object-fit: cover; display: block;，缺一不可 - iOS Safari 中
100vh可能因地址栏显示/隐藏跳变，建议加min-height: 100%或用100dvh（Chrome 108+/Safari 16.4+ 支持）
position: fixed 和 position: absolute 怎么选
用 fixed 是更稳妥的选择——它直接锚定视口，不随滚动偏移，也不受父级 transform 或 will-change 影响；而 absolute 依赖最近的定位祖先，一旦祖先设了 transform，就会触发新层叠上下文，导致 z-index: -1 失效、视频被截断。
-
fixed：适用于真正“背景层”场景，z-index: -1有效，推荐首选 -
absolute：仅在需要跟随某个局部容器（如 modal 内部视频）时使用，且确保其父级无transform、filter、will-change - 无论哪种，都得加
pointer-events: none，否则会挡住下方按钮或链接
移动端自动播放失败的典型错误
autoplay muted 不是万能钥匙。iOS Safari 和部分安卓 WebView 仍可能卡在首帧，报错 DOMException: play() failed because the user didn't interact with the document first。
- HTML 中必须显式写：
<video autoplay muted playsinline loop></video>（playsinline对 iOS 必需） - JS 中不能等
DOMContentLoaded后再调用：video.play()必须紧贴 DOM 插入后立即执行，延迟 >50ms 就可能被拒 - 加
.catch(e => console.warn("Autoplay blocked:", e))捕获并降级（例如切换 poster 图） - 某些低版本 WebView 不认
muted="true"，得写成muted纯属性，不要赋值
object-fit: cover vs contain 的实际取舍
两者不是风格偏好问题，而是内容安全边界问题。用错会导致关键信息被切掉或大面积留白。
-
cover：等比缩放填满，溢出裁剪。适合横屏视频（16:9 / 21:9）在桌面端；但在竖屏手机上，上下会被大幅裁掉——如果视频里有人脸或文字在边缘，必丢 -
contain：等比缩放居中，完整显示。适合竖屏素材（9:16）或必须保全所有画面内容的场景，但必然留白，需配合background-color填充背景色 - 别指望靠 CSS 把竖屏视频“拉伸”成横屏——变形不是 bug，是违反宽高比约束的必然结果
最常被忽略的一点：视频格式和编码。哪怕样式全对，用 .mov 或未压缩 AVI，低端安卓机一样卡顿发热；.mp4（H.264）仍是兼容性与性能的底线选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
