如何使用CSS实现一个不带JS的响应式全屏背景视频布局？

video加object-fit: cover仍有黑边，是因为该属性只控制裁剪方式，不确保容器铺满视口；必须清除body默认margin、父容器设position: fixed+100vw/100dvh、video设display: block+100%+object-fit: cover，并满足autoplay/muted/playsinline/preload="metadata"四条件才能实现无黑边全屏播放。

video加object-fit: cover为什么还是有黑边

根本不是object-fit没生效，而是它只管“怎么裁”，不管“容器有没有真铺满视口”。浏览器先按视频原始宽高比撑开父级（比如body），再裁剪——如果父容器没强制占满整个视口，黑边必然出现。

必须同时满足：

• body { margin: 0; overflow-x: hidden; } —— 浏览器默认body有8px外边距，漏掉就会漏白边；安卓微信和Safari竖屏必出横向滚动条
• video的直接父容器（或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: inline（默认）在部分浏览器中会让object-fit失效

autoplay muted playsinline preload="metadata"缺了哪个都会失败

Chrome、Safari、Firefox 全部强制要求：无声自动播必须四者共存，缺任意一个，视频大概率卡在首帧、跳原生全屏，或报错DOMException: play() failed because the user didn't interact with the document first。

HTML里必须显式写出：

立即学习“前端免费学习笔记（深入）”；

• autoplay —— 不是可选，是触发播放的前提
• muted="true" —— 显式写true比空值更稳，iOS Safari对空muted解析不一致
• playsinline —— 专治iOS Safari强制跳转，Chrome Android也依赖它保持内联
• preload="metadata" —— 禁用preload="none"，否则用户滑到页面时视频还没加载

示例写法：<video autoplay muted="true" playsinline preload="metadata" loop><source src="bg.mp4" type="video/mp4"></video>

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

z-index: -1对position: static（video默认值）完全无效。它不是“调低层级”，而是在已定位元素内部调节顺序。

常见失效场景和应对方式：

• 只写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，而是把body、video、它的父容器、z-index层叠关系、以及移动端自动播放策略全部对齐——漏掉任何一个环节，黑边、滚动条、静音失败、点击失灵就全来了。