必须同时重置body默认margin/overflow、用position:fixed+100dvh父容器、显式设video为block并宽高100%+object-fit:cover，且autoplay需搭配muted、playsinline、preload="metadata"四属性。
直接用 object-fit: cover 不行，它只管裁剪，不管容器有没有真铺满视口——黑边、滚动条、首帧卡住，全是因为漏了关键控制点。
为什么 object-fit: cover 加了还是有黑边
根本不是属性没生效，而是浏览器先按视频原始宽高比撑开父级（比如 body），再裁剪。如果父容器没强制占满整个视口，黑边必然出现。
-
body默认有margin: 8px，漏掉就会漏白边 - 移动端 Safari 地址栏收放时，
100vh会抖动，改用100dvh更稳 -
video默认是display: inline，部分浏览器下object-fit直接失效，必须显式设display: block
video 元素必须加的四个 HTML 属性
Chrome、Safari、Firefox 全部强制要求四者共存，缺一就卡首帧、跳全屏或报 DOMException: play() failed because the user didn't interact with the document first。
-
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 -
pointer-events: none一定要加，否则视频层会拦截鼠标事件（按钮点不到）
移动端竖屏必出横向滚动条？
安卓微信和 Safari 竖屏下，漏掉 body { overflow-x: hidden; } 就会触发水平滚动条——这不是 bug，是浏览器把滚动条宽度（Windows 常为 17px）算进了 100vw。
-
html, body { margin: 0; padding: 0; }是基础，但不够 - 伪元素或固定定位视频若用
width: 100vw，必须配合overflow-x: hidden才能压住溢出 - 更精细的方案可用
width: calc(100vw - 17px)（Windows）或calc(100vw - 0px)（macOS），但overflow-x: hidden更通用
真正难处理的，从来不是怎么“铺满”，而是怎么让铺满这件事在地址栏收放、横竖屏切换、不同 WebView 版本里都稳定不抖——这些细节一旦漏掉一个，用户看到的就是黑边、白屏或左右拖拽才能看完内容。
