根本原因是video自身宽高比约束父容器尺寸，object-fit: cover仅控制内容裁剪而不改变容器布局；必须用position: fixed使父容器强制铺满视口，并重置body margin、设video为block且加-webkit前缀兼容旧版safari。
video加object-fit: cover为什么还有黑边
根本原因是video自身宽高比约束了父容器尺寸，而object-fit: cover只控制内容裁剪方式，不改变容器布局行为。浏览器先按视频原始比例撑开父级（比如body），再裁剪——如果父容器没强制铺满视口，黑边必然出现。
- 必须给
video的**直接父容器**设position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; -
body默认有margin: 8px（各浏览器略有差异），要显式重置为margin: 0 -
video自身需设width: 100%; height: 100%; object-fit: cover;，且不能依赖display: inline（默认值），必须加display: block - iOS 12以下 Safari 需补
-webkit-object-fit: cover;
为什么用fixed定位而不是absolute或flex
全屏背景视频的核心诉求是：视觉上完全覆盖视口、不随滚动偏移、不参与文档流。这三点position: fixed能一次性满足；absolute依赖父级position: relative，一旦父容器高度不足或被其他元素挤压，就会漏白边甚至触发横向滚动条；flex方案在移动端容易因min-height: 100vh计算不准（如地址栏收放）导致高度塌陷。
-
fixed让video脱离文档流，锚定视口四角，不受页面滚动、缩放、地址栏变化影响 - 若用
absolute，父容器必须同时设position: relative; height: 100vh;，但100vh在iOS Safari中可能包含地址栏高度，导致实际可视区域变小 - flex方案常见于容器内居中视频，但作为**全屏背景**时，
flex仍需配合fixed父容器才可靠
autoplay和muted为什么是硬性要求
Chrome、Safari、Firefox均强制要求：自动播放带声音的视频必须由用户手势触发，否则会被静音甚至暂停。背景视频几乎都得“无声自动播”，这不是CSS能绕开的兼容性门槛。
- 必须同时写
autoplay和muted属性，缺一不可；仅autoplay会被拦截 -
playsinline建议加上，避免iOS设备强制全屏播放 - 错误信息
DOMException: play() failed because the user didn't interact with the document first就是典型提示 - 不要依赖JS后续调用
play()——多数浏览器会拒绝无用户交互的音频播放请求
移动端Safari里视频卡顿或闪烁怎么办
常见现象是动画撕裂、加载延迟、或background-attachment: fixed引发整页卡死。这不是CSS写错，而是iOS WebKit对合成层调度和媒体解码的限制所致。
- 确保
video加preload="metadata"，避免加载完整视频才开始渲染 - 优先用
.mp4格式（H.264编码），WebM在部分iOS版本支持不稳定 - 禁用
background-attachment: fixed——它和video叠加时极易触发iOS渲染bug - 加
pointer-events: none，防止视频层意外拦截点击事件（比如按钮点不到） - 准备
poster封面图和imgfallback，网络差或解码失败时降级显示
fixed的锚点选择、object-fit的生效条件、以及浏览器对自动播放的策略里——漏掉任何一环，黑边或静音就立刻出现。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
