视频背景在移动端需用position-fixed全屏video+object-fit:cover+安全边距设计，必须设autoplay、muted、loop，优先MP4+WebM双源及poster封面。
视频背景在移动端被裁切或消失
Bootstrap 本身不提供视频背景组件，background-video 这类写法根本无效。常见错误是直接把 <video> 塞进 <div class="container"> 里，结果在 iPhone 或小屏 Android 上只显示左上角一帧，甚至整个 <video> 被父容器的 overflow: hidden 吃掉。
正确做法是用 <video> 作为全屏层，配合 Bootstrap 的栅格和工具类控制内容层叠关系：
- 给
<video>添加class="position-fixed w-100 h-100 top-0 start-0"（Bootstrap 5.3+），确保它铺满视口且不随滚动偏移 - 视频父容器不要设
height或overflow，否则会干扰定位 - 内容区域必须加
position-relative z-index（比如z-index: 10），否则文字永远压在视频底下 - 用
object-fit: cover控制缩放（不是background-size: cover—— 那对<video>无效）
autoplay 和 muted 在 Chrome/Firefox 被静音或阻断
现代浏览器强制要求：自动播放视频必须静音，否则直接暂停。你看到控制台报错 The video playback was aborted due to a corruption problem 或 play() failed because the user didn't interact with the document first，基本就是这个原因。
绕过方式很实在：
- 必须同时设置
autoplay、muted、loop三个属性，缺一不可 - 避免用 JS 触发
.play()，除非用户已点击过页面任意位置（监听click后再调用） - 如果视频带声音，改用
poster属性配静态封面图 + 播放按钮，由用户主动触发 - 注意 Safari 对
autoplay更严格，即使muted也可能延迟几秒才播
响应式尺寸下 object-fit: cover 导致关键画面被裁掉
视频宽高比固定（如 16:9），而屏幕宽高比千差万别（iPhone 竖屏 9:16，iPad 横屏 4:3），object-fit: cover 会优先保证填满，必然裁边。用户常抱怨“人物头被切掉了”“LOGO 看不见”。
解决不是靠换属性，而是靠预判和妥协：
- 导出视频时预留安全边距（safe area）：主体内容集中在中心 75% 区域，四周留空
- 用
object-position微调（如object-position: 50% 30%把画面往上提一点，保全头部） - 不强求所有设备都“完美居中”，在
@media (max-width: 768px)里可降级为object-fit: contain+ 背景色填充，至少内容完整 - 避免在视频上叠加重要文字——文字应放在 Bootstrap 的
container内，用position-absolute定位，而非直接写在视频帧里
加载性能与兼容性取舍：MP4 vs WebM vs poster
只放一个 .mp4 文件看似省事，但 iOS 旧版可能卡在 loading 状态，Android 低版本可能解码失败，且文件体积大拖慢首屏。
务实方案是分层兜底：
- 优先提供 H.264 编码的
.mp4（iOS/Android/Chrome 全支持） - 额外加一个
<source src="bg.webm" type="video/webm">，给 Firefox/Chrome 提供更小体积选项（WebM 通常比同质 MP4 小 20–30%） -
poster属性必须设——这是视频加载完成前唯一可见内容，选一张和视频首帧高度一致的图，避免闪动 - 禁用
preload="auto"（尤其移动端），改用preload="metadata"，减少初始流量
视频背景从来不是“设个 class 就完事”的功能，它本质是视觉层、行为层、网络层三者的妥协点。最常被忽略的是：没有 fallback 图片的视频背景，在弱网或 JS 失效时就是一片空白——所以 poster 不是可选项，是必填项。
