视频背景必须用<video>元素配合定位实现，不能用background-image；需设置autoplay muted loop playsinline、object-fit:cover、poster降级，并优化体积至2–5MB。
video 元素不能直接当 background-image 用
浏览器不支持把 <video> 当作 css 的 background-image，硬写 background-image: url(video.mp4) 只会加载失败或显示空白。这不是 bootstrap 的限制，是 css 规范本身就不允许。
真正能实现“视频背景”的，是把 <video> 放在容器底层，再用定位 + z-index 把内容层盖上去。Bootstrap 只提供布局辅助，不封装视频背景逻辑。
- 别在
class="bg-video"这类自定义类里幻想 Bootstrap 内置了视频背景组件 - 别用
background: url(...)指向视频文件——它不会播放，控制台会报Failed to load resource: net::ERR_INVALID_RESPONSE - 移动端默认静音且不自动播放，
autoplay+muted是硬性要求，漏掉一个就黑屏
用 position: absolute + object-fit 实现响应式覆盖
核心是让 <video> 填满父容器，同时保持比例不拉伸。Bootstrap 的栅格或工具类（比如 position-relative）只负责撑开容器，真干活的是 CSS。
示例结构：
<div class="position-relative vh-100">
<video class="position-absolute top-0 start-0 w-100 h-100" autoplay muted loop playsinline>
<source src="bg.mp4" type="video/mp4">
</video>
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center">
<h1 class="text-white">Hello</h1>
</div>
</div>-
vh-100确保容器占满视口高度；没它，视频可能只显示一行高 -
object-fit: cover必须手动加（Bootstrap 不带），否则视频会被拉宽/压扁；写在video上，不是父容器 - iOS Safari 要求
playsinline，否则全屏播放、遮挡内容 - 视频格式优先选 MP4（H.264），WebM 作为备选，避免用 MOV 或 AVI
性能和兼容性：别让视频拖垮页面
视频背景本质是持续解码 + 渲染，比图片背景重得多。用户没看到首帧前，页面就该有降级方案。
- 首屏关键内容不能依赖视频加载完成；用
poster属性设封面图，防白屏：<video poster="poster.jpg"> - 避免在滚动区域（如
overflow-y: auto容器）里放视频背景，iOS 上容易卡顿甚至崩溃 - Chrome 95+ 对后台标签页的
autoplay更激进，若用户切走再切回，视频可能暂停；可监听visibilitychange手动恢复 - 不要在
@media (prefers-reduced-motion: reduce)下仍强制播放；检测后换成静态图：video[aria-hidden="true"] { display: none; }
Bootstrap 5.3 的 utility 类能帮但不替你决策
新版 Bootstrap 提供了 position-absolute、top-0、w-100 这类类名，省得手写 CSS，但它们不处理视频特有的问题。
-
opacity-*类可用于淡入效果，但别对<video>直接设opacity-0后 JS 控制显示——会导致首次渲染黑屏时间变长 - 想居中文字？用
d-flex align-items-center justify-content-center比text-center更可靠，因为视频层没有行高概念 - 别指望
bg-dark或text-light自动适配视频亮度；视频明暗变化时，文字颜色可能突然看不见，得用mix-blend-mode或半透蒙版
最常被跳过的一步：视频文件体积。压到 2–5MB 以内，用 FFmpeg 加 -vcodec libx264 -crf 23 -preset fast；太大，首帧延迟超过 3 秒，用户就划走了。
