Bootstrap 不提供全屏视频背景功能，需结合原生 标签与自定义 CSS 实现；关键在于使用 position: fixed、object-fit: cover、muted autoplay playsinline，并优化编码、体积及加载策略。
Bootstrap 本身不提供全屏视频背景功能，它只是 CSS 框架；真正实现靠的是原生 HTML <video></video> + 自定义 CSS，Bootstrap 只负责辅助布局和响应式控制。直接用 Bootstrap 的类（比如 container-fluid 或 vh-100）配合视频元素就能跑起来，但默认行为容易出问题——比如视频拉伸变形、加载卡顿、移动端自动播放失败。
怎么让 <video></video> 真正撑满整个视口
关键不是加 width: 100%; height: 100vh; 就完事。必须用 object-fit: cover; 防止变形，再用 position: fixed; 脱离文档流，避免被其他内容挤压。Bootstrap 的 vh-100 类只对块级容器有效，对 <video></video> 本身无效，所以不能依赖它直接设高。
- 给
<video></video>加style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;" - 外层
<div> 套个 <code>position: relative;，方便后续内容定位 - 务必设
z-index: -1;，否则视频会盖住导航栏或按钮 - 别用
background: url(...)方式——CSS background 不支持视频 - 必须加
muted和autoplay属性：<video muted autoplay></video> - 加上
playsinline（iOS 必需），否则会在全屏播放器里打开 - 不要设
loop太大——某些安卓机反复 loop 会导致内存泄漏 - 如果仍失败，说明用户手势未触发，可加一个透明遮罩层 + 点击事件调用
play() - 用
poster="fallback.jpg"提供首帧图，避免白屏 - 在
@media (max-aspect-ratio: 16/9)下给<video></video>加transform: scale(1.2);稍微放大，减少黑边 - 视频编码推荐 H.264 + MP4 主格式，WebM 作后备（
<source></source>多格式 fallback） - 别把视频放在
container里——它自带 padding，会破坏全屏效果
为什么视频在手机上不自动播放，还报错 NotAllowedError
这是浏览器策略强制限制：移动端 Chrome/Safari 要求视频必须静音（muted）、用户交互触发（如点击），且不能有音频轨道。Bootstrap 完全不干预这个逻辑，你得手动加属性。
怎么兼容不同分辨率又不让视频裁剪过度
object-fit: cover; 会居中裁剪，但小屏可能切掉关键画面。与其硬调 CSS，不如准备两版素材：横屏主视频 + 竖屏备用 poster 图（poster 属性），并在 CSS 里用媒体查询微调缩放。
最常被忽略的是视频体积和加载时机：超过 5MB 的 MP4 在弱网下会白屏几秒，建议用 FFmpeg 压到 2–3MB，分辨率控制在 1280×720 左右，码率 1500–2000 kbps。另外，preload="metadata" 比 auto 更稳妥，避免预加载整段视频拖慢首屏。
