正确方式是用<video>嵌套于position: fixed容器内，设object-fit: cover、muted、autoplay、loop、playsinline，禁用width/height: 100vw/vh强撑，避免拉伸变形与移动端静音拦截。
video 元素如何正确设置为全屏背景
直接把 <video> 放在页面顶部并设 width: 100vw; height: 100vh; 不行——它会拉伸变形、遮挡内容，且在移动端常被静音拦截。真正可用的方式是用 object-fit: cover; 配合绝对定位容器。
实操建议：
- 用一个
<div class="bg-video">作为视频容器，设position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; -
<video>放在该容器内，设width: 100%; height: 100%; object-fit: cover;（不是contain） - 必须加
muted autoplay loop属性，否则 Chrome/Firefox 会拒绝自动播放 - 建议加
playsinline（iOS Safari 必需），避免跳转全屏
为什么 background-video 不能用 CSS background-video
CSS 没有 background-video 属性，这是常见误解。有人试图写 background: url(video.mp4);，结果无效——CSS background 只支持图片、渐变、色值。
替代方案只有两种：
立即学习“前端免费学习笔记（深入）”；
- 用
<video>+ 定位模拟背景（推荐，可控性强） - 用
<canvas>动态绘制视频帧（复杂，仅需特殊交互时考虑）
别浪费时间找“CSS 视频背景”方案，浏览器根本不支持。
移动端适配和静音策略怎么绕过限制
iOS 和 Android 对自动播放限制极严：未用户手势触发、未静音的视频一律暂停。所以 muted 不是可选项，是硬性前提。
关键细节：
-
autoplay在 iOS 10+ 必须配合playsinline才能在页面内播放，否则强制全屏 - 部分安卓机（如小米）即使
muted也可能卡首帧，加preload="auto"提前加载 - 视频格式优先用
.mp4（H.264 + AAC），不要只提供.webm，Safari 不支持 - 可加
poster属性指定首帧图，避免黑屏闪动：poster="cover.jpg"
性能与降级处理怎么做才不翻车
视频背景比图片重得多，尤其在弱网或低端设备上。不处理降级，用户打开就是白屏或卡死。
必须做的几件事：
- 用
@media (prefers-reduced-motion: reduce)关掉动画/视频，对无障碍友好 - 监听
video的error事件，出错时用background-image替代：video.addEventListener('error', () => { document.body.style.background = 'url(fallback.jpg) center/cover no-repeat'; }); - 视频分辨率别超 1280×720，码率控制在 1500–2500 kbps，太大加载慢还耗电
- 如果首页非核心功能，考虑首屏只加载 poster，用户滚动后才加载视频（懒加载）
最常被忽略的是 error 降级——很多人测试时本地视频正常，上线后 CDN 路径错或跨域失败，就只剩一片空白。
