直接用<video>做背景会出问题，因默认不拉伸填满容器、不响应尺寸变化；加object-fit:cover后移动端易现黑边、裁切错位或控件残留；Bootstrap无原生支持，需CSS+JS补足。
为什么直接用 <video> 做背景会出问题
浏览器默认的 <video> 元素不自动拉伸填满容器，也不响应父级尺寸变化；加上 object-fit: cover 后，移动端常出现黑边、裁切错位或播放器控件残留。Bootstrap 自身不提供视频背景组件，得靠 CSS + 少量 JS 补足。
用 position: absolute + object-fit 实现真正覆盖
核心是把视频“钉”在容器底层，并强制等比缩放覆盖全区域。关键不是 Bootstrap 类，而是 CSS 层叠逻辑：
- 父容器（如
<div class="hero">）必须设position: relative和明确高度（比如min-height: 100vh） -
<video>设position: absolute; top: 0; left: 0; width: 100%; height: 100%，再加object-fit: cover - 必须加
z-index: -1确保视频在内容下方，但不能用z-index: -999——某些 iOS Safari 会因此静音或暂停 - 为防加载空白，建议加
poster属性指向首帧截图
<div class="hero position-relative">
<video class="w-100 h-100" autoplay muted loop poster="cover.jpg">
<source src="bg.mp4" type="video/mp4">
</video>
<div class="hero-content position-relative z-1">
<h1>主标题</h1>
</div>
</div>
移动端自动静音和自动播放的兼容性处理
iOS 和 Android 对自动播放有严格限制：没用户交互、没 muted、没 autoplay 属性，视频根本不会启动。常见错误是只写 autoplay 忘了 muted，或用 JS 动态调 play() 却没捕获 Promise 拒绝。
- 必须同时声明
autoplay muted，且muted不能靠 JS 后补（iOS 不认） - 部分安卓浏览器要求
playsinline属性，否则跳全屏 - 监听
canplaythrough而非loadeddata，避免因缓冲不足触发失败 - 加兜底逻辑：
video.play().catch(e => console.warn("Autoplay prevented:", e))
性能与加载优化不能只靠 Bootstrap 类
视频文件大、解码耗资源，尤其低端机容易卡顿掉帧。Bootstrap 的 img-fluid 对视频无效，得手动控制：
- 用 MP4 H.264 编码（兼容性最好），分辨率控制在 1280×720 以内，码率 ≤ 2Mbps
- 避免在
@media (max-width: 768px)里用同一份高清视频——可借助<source media="...">切不同分辨率源 - 关键路径上禁用
preload="auto"，改用preload="metadata"减少初始请求体积 - 如果只是装饰性背景，考虑用 CSS
background-video方案（如background: url(video.gif)）替代真实视频，更轻量
最麻烦的其实是 Safari 的 transform: scale() 与 object-fit 组合渲染 bug——某些版本下缩放后边缘模糊，这时候只能退回到 width: 100vw; height: auto + 负 margin 微调，而不是硬扛。
