Bootstrap导航栏不支持背景视频，因其非容器组件且浏览器不支持video作为background-image；正确做法是用position:fixed视频层覆盖视口顶部，navbar设z-index:10并加文字阴影或半透遮罩。
Bootstrap 导航栏（.navbar）本身不支持背景视频——它不是容器型组件，没有视觉层承载能力，强行往 .navbar 上加 <video> 或 background: url(video.mp4) 会失败或被裁剪，且破坏导航交互。
为什么不能直接给 .navbar 加 background-video
浏览器根本不支持 background-image: url(video.mp4)，写上去既不报错也不生效，静默退化为空白；.navbar 默认是 position: relative 但高度由内容撑开（通常只有 56px 左右），根本容不下视频；它的父级（比如 .container）还有 padding 和 max-width，会把视频挤偏、切边。
正确做法：用 position-fixed 覆盖整个视口顶部区域
导航栏需要“看起来”有视频背景，实际是把视频层固定在视口顶部（覆盖导航栏所在区域），再让导航内容浮在上面。关键不是改 .navbar，而是重构层级：
- 视频层用
<video>+position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;，并加z-index: -1沉底 -
.navbar必须显式设position: relative; z-index: 10;（否则 iOS Safari 可能因 stacking context 问题导致点击失效） - 为防视频遮挡导航文字，文字层（如
.navbar-brand）要加text-shadow或半透背景（bg-dark bg-opacity-25）提升可读性 - 别用
vh-100给视频容器——.navbar不占满视口，vh-100会导致视频拉伸变形
移动端必须加的四个属性一个都不能少
iOS Safari 和 Android Chrome 对导航区视频尤其敏感，漏掉任意一个都会黑屏或跳全屏：
-
autoplay：声明自动播放意图 -
muted：初始静音是硬性前提（即使后续 JS 解除） -
loop：避免播完停住，造成导航区突然变黑 -
playsinline：阻止 iOS 强制全屏，否则导航栏被盖住
额外建议加 poster="nav-poster.jpg"，首帧加载慢时用户看到的是封面图，不是黑块。
如何避免导航栏文字被视频干扰或看不清
视频动态画面会让白色/浅色文字瞬间不可读，靠调字体颜色远远不够：
- 给
.navbar-brand或.nav-link加text-shadow: 0 1px 3px rgba(0,0,0,0.7); - 用
<div class="bg-dark bg-opacity-25"></div>包裹文字区域，作为局部遮罩（不是全局 opacity） - 禁用
transform: translateZ(0)类（如某些 Bootstrap 插件自动加的），它可能触发 iOS 的渲染 bug，导致文字边缘发虚 - 别在
@media (prefers-reduced-motion: reduce)下还保留视频——应 JS 检测后替换为静态图
真正难的不是“怎么放上去”，而是视频在小屏上裁切是否保留关键信息（比如人脸或 logo）、滚动时 navbar 是否仍清晰可见、以及 Safari 切后台再切回时视频是否意外暂停——这些没法靠类名解决，得靠 visibilitychange 监听和手动 play() 补救。
