正确方式是用嵌套于position: fixed容器内，设object-fit: cover、muted、autoplay、loop、playsinline，禁用width/height: 100vw/vh强撑，避免拉伸变形与移动端静音拦截。

video 元素如何正确设置为全屏背景

直接把 <video></video> 放在页面顶部并设 width: 100vw; height: 100vh; 不行——它会拉伸变形、遮挡内容，且在移动端常被静音拦截。真正可用的方式是用 object-fit: cover; 配合绝对定位容器。

实操建议：

• 用一个 <div class="bg-video"> 作为视频容器，设 <code>position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
• <video></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></video> + 定位模拟背景（推荐，可控性强）
• 用 <canvas></canvas> 动态绘制视频帧（复杂，仅需特殊交互时考虑）

别浪费时间找“CSS 视频背景”方案，浏览器根本不支持。


Wechat HTML Publisher
直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。
下载

移动端适配和静音策略怎么绕过限制

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 路径错或跨域失败，就只剩一片空白。