如何修复CSS响应式视频全屏模式下的黑边排版？

黑边问题根源在于容器未真正铺满视口，需同时重置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