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"></source></video>
z-index: -1为什么视频还在内容上面
z-index: -1对position: static（video默认值）完全无效。它不是“调低层级”，而是在已定位元素内部调节顺序。
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
常见失效场景和应对方式：
- 只写
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层叠关系、以及移动端自动播放策略全部对齐——漏掉任何一个环节，黑边、滚动条、静音失败、点击失灵就全来了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
