全屏背景视频留白或裁切异常的根本原因是object-fit: cover不控制容器尺寸，仅控制内容适配方式；必须同时满足容器占满视口、宽高比匹配、object-fit作用于video元素本身三个条件。
全屏背景视频为什么总在某些设备上留白或裁切异常
根本原因是 object-fit: cover 本身不控制容器尺寸，只控制内容如何适配——如果父容器（比如 <video> 的外层 <div>）没设成全屏，或者没处理好宽高比继承，cover 就无从发力。常见现象是：iPhone 上顶部/底部黑边、Chrome 桌面端右侧被截、Safari 中视频突然缩成小方块。
必须同时满足三个条件：容器占满视口、视频宽高比与视口不冲突、object-fit 作用于视频元素本身。
- 给包裹
<video>的容器加position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; overflow: hidden; -
<video>必须设为width: 100%; height: 100%; object-fit: cover;，不能只设max-width: 100% - 移除所有可能干扰的 margin/padding/border，包括
body默认样式
video 元素必须禁用 controls 和 poster 吗
不是必须，但强烈建议。带 controls 的视频会强制保留控制栏高度（通常 ~30px），破坏 100vh 的精确覆盖；poster 图片若尺寸不匹配，会在首帧加载前暴露错位，且 Safari 对 poster 的 object-fit 支持不稳定。
更稳妥的做法是用 CSS 隐藏原生控件，并用 JS 控制播放状态：
立即学习“前端免费学习笔记（深入）”；
<video muted autoplay loop playsinline> <source src="bg.mp4" type="video/mp4"> </video>
-
muted和autoplay是移动端自动播放的前提（iOS/Safari 强制要求） -
playsinline防止 iOS 全屏跳转 - 用
video::-webkit-media-controls等伪类隐藏控件，而非依赖controls属性开关
object-fit: cover 在不同浏览器中的兼容性陷阱
IE 完全不支持 object-fit，Edge 12–15 支持但对 <video> 的实现有偏差（常表现为拉伸而非裁切）。即使现代浏览器，Android 4.4 WebView 和部分国产浏览器内核仍存在渲染延迟：首帧加载后才应用 cover，导致闪动。
应对策略不是降级为 background-image（牺牲视频能力），而是加一层防御性 CSS：
- 给
<video>设min-width: 100%; min-height: 100%;，作为object-fit失效时的兜底 - 用
@supports (object-fit: cover)包裹核心规则，避免老浏览器解析错误 - 监听
loadeddata事件，在视频元数据就绪后手动触发一次video.style.transform = 'scale(1)'，强制重绘（解决 Android Webview 渲染卡顿）
如何让文字层始终清晰显示在视频上方不被遮挡
关键不是 z-index 数值大小，而是堆叠上下文（stacking context）的创建顺序。如果视频容器用了 position: fixed，而文字容器只是普通流式布局，文字会被压在视频下方——哪怕设置了 z-index: 9999。
正确做法是让文字容器也建立独立堆叠上下文：
- 文字容器必须设
position: relative或position: absolute，且z-index值大于视频容器的z-index - 视频容器推荐用
z-index: -1（而非1），避免与其他 fixed 元素（如导航栏）冲突 - 确保文字容器没有
transform、opacity < 1等隐式创建新上下文的属性，否则可能意外隔离层级
最易忽略的是：视频容器的 backface-visibility: hidden 有时会干扰文字抗锯齿，尤其在 Chrome 中。如发现文字边缘发虚，尝试移除该声明。
