直接用 video 标签加 background 会失败，因为 CSS background 不支持视频值；必须用 video 元素绝对定位+100%宽高+object-fit: cover 实现全屏响应式背景，并添加 muted、autoplay、playsinline 等属性确保自动播放，配合伪元素遮罩和 z-index 分层实现文字可读性。
为什么直接用 video 标签加 background 会失败
因为 CSS 的 background 属性不支持视频作为背景值（background: url(video.mp4) 无效），必须用 video 元素自身撑满容器，并配合 object-fit: cover 和定位控制。Bootstrap 自身不提供“视频背景”组件，得靠手动组合实现。
如何让 video 真正全屏铺满且响应式
关键不是靠 Bootstrap 的栅格类，而是用绝对定位 + 宽高 100% + object-fit: cover。否则在小屏上视频会被裁切、拉伸或留白。
- 给
video外层容器设position: relative，并设高度（如min-height: 100vh） -
video本身设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 必须加
object-fit: cover（不是contain），否则宽高比错乱 - 加
z-index: -1让视频沉底，避免遮挡文字内容 - 移动端需加
playsinline和webkit-playsinline属性，否则 iOS 强制全屏播放
怎么叠加半透明遮罩又不影响文字可读性
遮罩不是靠 video 的 opacity（会把视频和文字一起变透明），而是用伪元素或额外 div 叠在视频上方。
- 推荐用
::before伪元素：给容器加position: relative，再用&::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 0; } - 文字层要设
position: relative; z-index: 1，确保压在遮罩之上 - 别用
filter: brightness()或mix-blend-mode，它们在不同浏览器渲染差异大，尤其对白色文字不利
为什么 Autoplay 在 Chrome 和 iOS 上经常失效
现代浏览器策略强制要求视频自动播放必须满足两个条件：静音 + 用户交互后触发。否则会静音也不播，或直接中断。
- 务必加
muted和autoplay属性，缺一不可 - 加
loop避免播放完黑屏；加preload="metadata"减少首帧等待 - iOS Safari 还需要
webkit-playsinline+playsinline，否则仍跳转全屏 - 如果仍不播，检查是否启用了广告拦截插件（部分插件会屏蔽
autoplay）
<section class="hero-video position-relative min-vh-100">
<video class="w-100 h-100" autoplay muted loop playsinline webkit-playsinline preload="metadata">
<source src="bg.mp4" type="video/mp4">
</video>
<div class="hero-content position-relative z-1 d-flex align-items-center justify-content-center text-center text-white p-4">
<h1>欢迎来到首页</h1>
</div>
</section>
遮罩用 CSS 控制，不用额外 HTML 标签。复杂点在于视频格式兼容性（MP4 是底线，WebM 可选）、首帧加载体验、以及 Safari 对 object-fit 的旧版本支持——iOS 12.2+ 才完全可靠，老版本得用 JS fallback。
