黑边问题根源在于容器未真正铺满视口，需同时重置body默认margin/overflow、使用position:fixed+100dvh的父容器、显式声明video为block并设宽高及object-fit:cover，且autoplay必须搭配muted、playsinline、preload="metadata"四属性。
黑边不是 object-fit: cover 失效，而是容器没真正铺满视口——它只管“怎么裁”，不管“有没有撑开”。必须从盒模型、定位、加载策略三处同时动手，漏一项就留白或滚动。
body 和父容器的 margin/overflow 必须重置
浏览器默认给 body 加了 8px margin，哪怕视频尺寸拉满，这 8px 也会漏出白边（视觉上常被误认为黑边）；安卓微信和 Safari 竖屏下，漏掉 overflow-x: hidden 会强制触发横向滚动条，右侧出现不可见黑区。
-
body { margin: 0; overflow-x: hidden; }—— 这是底线，不能省 - 不要依赖
html或body作为视频直接父容器；它仍在文档流里，宽高继承不可靠 - 视频的直接父容器（比如一个
<div class="video-wrapper">）必须设为position: fixed，且top: 0; left: 0; width: 100vw; height: 100dvh; -
100dvh比100vh更稳：iOS 地址栏收放时不会抖动，Safari 横屏切换不再偏移
video 元素自身的 display 和尺寸必须显式声明
video 默认是 display: inline，在部分 Android 浏览器和旧版 Safari 中，object-fit 对 inline 元素不生效；而且不设 width/height，object-fit 就失去了计算基准。
-
video { display: block; width: 100%; height: 100%; object-fit: cover; }—— 缺一不可 - 别写
width: 100vw; height: 100vh在video上：它会覆盖object-fit的内部缩放逻辑，导致裁剪错位 - iOS 12 及更早版本需加
-webkit-object-fit: cover; - 避免用
object-fit: fill：它会强行拉伸变形，不是“去黑边”，是“毁画面”
autoplay 失败不是 JS 问题，是 HTML 属性组合缺位
现代浏览器（Chrome、Safari、Firefox）全部拒绝无声自动播放，除非四个属性同时存在。少一个，视频就卡首帧、跳原生全屏，或报 DOMException: play() failed because the user didn't interact with the document first。
立即学习“前端免费学习笔记（深入）”；
-
autoplay—— 必须显式写出，不是可选 -
muted="true"—— 显式写true比空值muted更稳，iOS Safari 对空值解析不一致 -
playsinline—— iOS Safari 强制内联播放的关键，Chrome Android 也依赖它 -
preload="metadata"—— 不要用preload="none"，否则滑到页面时视频还没加载完，首帧延迟 -
loop建议加上：Firefox 不加可能只播一帧就停；Chrome 95+ 允许但不保证行为一致
移动端横屏抖动、iOS 地址栏干扰、低端机卡顿这些细节最容易被忽略
你以为调好 CSS 就完事了？实际部署中，这些点才是真坑：
- Safari 的
100vh随地址栏收放动态变化，导致高度抖动、object-fit锚点重算，“抽帧”感明显；必须用100dvh替代 - 全屏视频持续解码渲染，低端安卓机容易发热、卡顿甚至崩溃；分辨率别超
1920×1080，手机端建议提供720p单独版本，用<source>+ 媒体查询切换 - IE11 完全不支持
object-fit，如需兼容，得用transform: scale()+ 负margin模拟，但维护成本高，建议直接降级为背景图 - 视频格式优先用
.mp4（H.264 编码），.webm作备选；避免.mov或未压缩 AVI
