应使用 video 标签而非 CSS background-video 实现背景视频，通过 position: absolute 铺满容器并设 z-index: -1，配合 preload="auto"、playsinline、muted 和 object-fit: cover 确保兼容性与体验。
用 video 标签直接嵌入背景视频，别用 CSS background-video
Bootstrap 本身不提供 background-video 这种 CSS 属性——这是常见误解。真正能实现背景视频的，是原生 video 元素配合定位与层叠控制。把 video 放在 Hero 容器内最底层，再用 position: absolute 铺满，是最稳定、兼容性最好（支持 Chrome/Firefox/Safari/Edge）的方式。
容易踩的坑：
-
video必须加preload="auto"，否则 iOS Safari 可能白屏或触发静音策略 - 务必设
playsinline和webkit-playsinline，否则 iOS 会全屏播放 - 不要用
poster图片替代首帧——某些安卓 WebView 不渲染 poster，导致初始黑屏 -
z-index要明确：视频层设z-index: -1，文字层设z-index: 1或更高
文字水平垂直居中靠 flex + justify-content/align-items
Bootstrap 5 内置 Flex 工具类，比手动写 transform: translate(-50%,-50%) 更可靠，尤其在移动端缩放或字体加载延迟时不易偏移。
推荐结构写法：
<div class="hero position-relative">
<video autoplay muted loop playsinline webkit-playsinline preload="auto">
<source src="hero.mp4" type="video/mp4">
</video>
<div class="hero-content d-flex flex-column justify-content-center align-items-center h-100 text-center">
<h1 class="text-white">欢迎来到首页</h1>
<p class="text-white-50">一段简短描述</p>
</div>
</div>
注意点：
-
h-100必须加在文字容器上，否则 Flex 无法撑满高度 -
text-center控制行内元素居中；align-items-center确保 Flex 子项水平居中 - 如果文字过多换行，
flex-column比text-center更可控
响应式下视频裁剪用 object-fit: cover，不是 width: 100%
直接给 video 设 width: 100%; height: 100% 会导致拉伸变形。正确做法是设宽高为 100%，再加 object-fit: cover 保持比例并裁剪溢出部分。
对应 CSS（可写进自定义样式或用 Bootstrap 的 style 属性）：
.hero video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
关键细节：
-
object-fit在 IE 中不支持，如需兼容 IE，得 fallback 到 poster 图片 + JavaScript 监听canplay事件切换 - 移动端小屏时，视频顶部/底部被裁掉是正常现象，重点保证主体人物或焦点区域在画面中央
- 避免用
min-height: 100vh给容器——iOS Safari 的地址栏显示/隐藏会触发视口变化，造成跳动
移动端自动播放失败？检查 muted 和用户交互触发逻辑
所有现代移动浏览器都强制要求视频自动播放必须静音，muted 属性缺一不可。但即使加了 muted，部分 Android 浏览器（如 Samsung Internet）仍可能因策略更新而拦截。
稳妥方案：
- 始终保留
muted和autoplay - 加一层淡入动画，用
opacity: 0 → 1避免视频加载空白期突兀 - 极端情况可监听
video的onerror，fallback 到静态背景图：<div class="hero-bg-placeholder bg-dark"></div> - 不要依赖
document.addEventListener('click', ...)去手动 play —— iOS 限制严格，且首次点击未必在视频区域
视频文件本身也影响成功率：H.264 编码、MP4 容器、关键帧间隔 ≤ 2s，能显著提升首帧加载速度和播放稳定性。
