全屏视频背景应使用 position: fixed + top: 0; left: 0; width: 100%; height: 100% 并配合 object-fit: cover，而非 width: 100vw; height: 100vh；需添加 playsinline、webkit-playsinline、autoplay、muted 及双格式 source（MP4+WebM），preload="metadata"，并处理 iOS 地址栏跳变与滚动穿透。
全屏视频背景必须用 position: fixed 而不是 width: 100vw; height: 100vh
用 width: 100vw; height: 100vh 看似能铺满，但实际会因滚动条、缩放、移动端地址栏显隐导致裁切或留白。真正可靠的方案是 position: fixed + top: 0; left: 0; width: 100%; height: 100%，再配合 object-fit: cover 防止拉伸变形。
常见错误现象：video 元素在 iOS Safari 中不自动播放、页面滚动时视频错位、加载后突然跳动。
- 必须加
playsinline和webkit-playsinline属性，否则 iOS 会强制全屏播放 -
autoplay和muted缺一不可，否则 Chrome/Firefox/iOS 都会静音拦截 - 建议用
poster属性提供首帧图，避免黑屏闪动 - 不要把
video放在body直接子元素里——它会被其他fixed元素遮挡，应包裹在独立div中并设z-index: -1
video 标签的 src 必须是 MP4（H.264）+ WebM 双格式兜底
只写一个 src 属性等于放弃 Firefox 和部分旧版 Edge。MP4（H.264）兼容性最好，但 Firefox 默认不支持；WebM（VP9）开源且轻量，但 Safari 旧版本不认。必须用 source 子标签双写：
<video autoplay muted playsinline webkit-playsinline> <source src="bg.mp4" type="video/mp4"> <source src="bg.webm" type="video/webm"> </video>
注意：type 值必须严格匹配，写成 video/x-matroska 或漏掉 type 都会导致某些浏览器跳过该 source。
立即学习“前端免费学习笔记（深入）”；
- 用 FFmpeg 转 WebM：
ffmpeg -i bg.mp4 -c:v libvpx-vp9 -crf 30 -b:v 0 -c:a libopus bg.webm - MP4 推荐用 H.264 High@L4.0，码率控制在 2000–4000 kbps，太大影响首帧加载
- 别用 GIF 或 Canvas 模拟视频背景——CPU 占用高，iOS 上极易卡顿
移动端适配要主动处理 Safari 地址栏和滚动穿透
iOS Safari 在滚动时会隐藏地址栏，导致视口高度突变，100vh 值会跳变，而 fixed 视频不会重绘。这不是 bug，是浏览器行为。解决方案只有两个：
- 放弃依赖视口单位，改用 JS 动态设置
height：video.style.height = window.innerHeight + 'px'，并在resize和scroll事件中更新（注意节流） - 更稳妥的做法：给
html, body加height: 100%;和overflow: hidden，禁用页面滚动，用内部容器滚动内容（即“全屏单页”模式） - 如果允许滚动，务必加
pointer-events: none到video容器，否则 iOS 上可能拦截点击事件
性能关键：用 preload="metadata" 而非 "auto"
preload="auto" 会让浏览器预加载整个视频，对 10MB+ 的背景视频来说，首屏加载时间直线上升，且用户可能根本没看到就切走了。而 preload="metadata" 只请求头信息（时长、尺寸、封面），足够触发 autoplay 流程，又不拖慢 LCP。
容易被忽略的点：
- 服务端需支持 HTTP Range 请求，否则
metadata模式会失败（Nginx 默认支持，Apache 需开启mod_headers和正确配置Accept-Ranges） - 检查 Network 面板里视频请求的
Range请求头是否存在，响应状态码是否为206 - 别在
video上加controls——不仅丑，还会破坏全屏沉浸感，且干扰自动播放策略
