无需JS纯CSS实现响应式全屏背景视频布局方法

“加了`object-fit: cover`，黑边还是在那儿杵着”——遇到这个问题的朋友，先别急着找bug，问题大概率不是`object-fit`没干活，而是它只负责“图片怎么裁”，管不了“容器有没有真填满视口”。 浏览器的默认行为是这样的：它会按视频的原始宽高比去撑开父容器，比如``，然后再裁切。如果父容器根本没占满整个视口，黑边自然就露出来了。要彻底斩断黑边，得做到这几步： * 清掉``的默认外边距，设`margin: 0; overflow-x: hidden;`——默认8px的外边缝会漏白，尤其安卓微信和Safari竖屏时，横向滚动条动不动就冒出来。 * 视频的直接父容器，或者视频自身，得设死定位：`position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh;`。注意，用`100dvh`比`100vh`稳，iOS地址栏收放时，画面不会跟着抖一下。 * 视频自身还得配齐：`display: block; width: 100%; height: 100%; object-fit: cover;`。漏掉`display: block`的话，部分浏览器会让`object-fit`直接罢工。

自动播放的四个条件，缺一个就罢工

Chrome、Safari、Firefox 现在统一口径：想无声自动播放，`autoplay`、`muted="true"`、`playsinline`、`preload="metadata"`这四件套必须全到。漏掉任何一个，视频大概率卡在首帧、跳成全屏播放，或者直接给你抛个“用户没交互就禁止播放”的报错。 推荐写法是这样： ``` ``` 这里有几个细节值得注意：`muted="true"`显式写`true`比空值稳，iOS Safari对空`muted`的解析并不一致；`playsinline`专治iOS Safari强制跳转，Chrome Android也靠它保持内联；`preload="metadata"`是为了保证用户滑到时视频已经加载，千万别设成`preload="none"`。

z-index: -1 为什么视频还在上面？

这是个经典坑。`z-index: -1`对`position: static`（视频的默认定位）完全无效。它不是“调低层级”，而是在已定位元素内部调节顺序。 实际操作中，常见的失效场景有： * 只写`z-index: -1`，没配`position: fixed`或`position: absolute`——必须补上定位属性才行。 * 父容器有`transform`、`opacity: 0.99`或`will-change`——这些属性会创建新层叠上下文，导致子元素`z-index: -1`被截断。更稳妥的做法是，给内容区域显式设一个`z-index: 1`。 * 依赖默认的`z-index: auto`——不同浏览器行为不一致，所有关键层都应该显式声明。 推荐最终组合是：`position: fixed; z-index: -1; pointer-events: none;`。最后一项能防止视频层拦截鼠标事件，比如按钮点不到。

移动端横屏切换时，视频突然偏移或留白

这不是bug，是`100vh`在iOS Safari中随地址栏显示/隐藏动态变化，导致高度抖动。而`object-fit: cover`重新计算裁切锚点时，画面就“抽”一下。 解决方案很明确： * 直接用`height: 100dvh`替换`100vh`——`dvh`是设备视口单位，不受地址栏跳变影响。 * 避免用`min-height: 100vh + width: 100%`这种松散组合，它在缩放或横竖屏切换时容易失守。 * 别指望用JS监听`resize`来“修复”。现代CSS已经能覆盖98.7%的设备，加JS反而引入兼容性风险和首屏卡顿。 真正难的不是写对那一行CSS，而是把``、视频、它的父容器、`z-index`层叠关系、以及移动端自动播放策略全部对齐——漏掉任何一个环节，黑边、滚动条、静音失败、点击失灵就全来了。