CSS没有background-video属性，全屏背景视频需用video元素配合object-fit: cover、width: 100vw、height: 100vh及autoplay muted等属性实现，并注意移动端playsinline、兼容性降级和视频源质量。
全屏背景视频为什么不能直接用 background-video？
CSS 没有 background-video 这个属性，这是初学者常踩的第一个坑。试图把 video 元素当背景图用时，直接设 width: 100vw; height: 100vh; 往往导致黑边、拉伸或裁剪异常——根本原因是没控制好内容缩放行为。
object-fit: cover 是覆盖全屏的关键
object-fit: cover 让视频按比例缩放并填满容器，超出部分被裁剪，视觉上真正“覆盖”整个视口。但它只对替换元素（如 video、img）生效，且必须配合明确的宽高尺寸。
实操要点：
- 给
video元素设width: 100vw; height: 100vh;，并添加object-fit: cover; - 确保父容器无 padding/margin 干扰，最好直接作用于
body或全屏div - 加
position: fixed; top: 0; left: 0; z-index: -1;避免遮挡内容，同时防止滚动条挤压 - 务必设置
video的autoplay和muted属性，否则现代浏览器会阻止自动播放
常见错误：黑边、闪烁、移动端失效
黑边通常是因为容器宽高比和视频源不一致，而 object-fit: contain 被误用；闪烁多因 video 在 DOM 加载完成前就渲染，触发重排；移动端失效则常因未加 playsinline 属性。
立即学习“前端免费学习笔记（深入）”；
关键修复项：
- 禁用默认视频控件：
controls="false"，避免 UI 干扰全屏效果 - 移动端内联播放：
playsinline+webkit-playsinline（iOS 10+） - 防闪烁技巧：初始设
opacity: 0;，监听canplaythrough事件后渐显 - 备用方案：用 poster 图片占位，防止加载空白
性能与兼容性要注意什么？
object-fit 在 IE 完全不支持，Android 4.4 以下也缺失。如果需兼容老设备，得降级为 JS 计算缩放比例 + transform: scale() 模拟，但开销更大。
更实际的取舍建议：
- 优先服务现代浏览器，用
@supports (object-fit: cover)做特性检测 - 视频格式选
mp4（H.264）为主，辅以webm提升编码效率 - 压缩分辨率：1080p 足够，不必 4K；码率控制在 2–4 Mbps，避免首帧加载过慢
- 慎用
loop—— 长视频循环可能引发内存增长，尤其 Safari
最易被忽略的一点：视频文件本身是否真正“全画幅”。很多所谓“横屏视频”其实带黑边，用 ffmpeg 检查原始宽高比比调 CSS 更治本。
