必须用position: fixed+width: 100vw/height: 100vh+object-fit: cover+z-index: -1实现全屏视频，同时设autoplay、muted、playsinline；需绕过.container，将video置于body直系子级，并压缩体积至≤3MB、添加poster与preload="metadata"。
全屏视频背景首页在 Bootstrap 中无法靠框架原生组件直接实现，必须手动控制 video 元素的定位、尺寸与层级，Bootstrap 只提供辅助类（如 position-absolute、w-100）和响应式工具，核心逻辑得自己写。
如何让 video 真正铺满整个视口
Bootstrap 的栅格和容器默认带内边距、最大宽度限制，会干扰全屏效果。关键不是用 .container，而是绕过它：
- 把
<video></video>放在直接子级，避免被任何父容器的overflow: hidden或transform截断 - 用
position: fixed+ 四方向0强制贴边，比position: absolute更可靠（尤其滚动时） - 加
object-fit: cover防止拉伸变形；z-index: -1确保内容层在上方（注意：不能用z-index: -999，部分浏览器不渲染） - 必须设
width: 100vw和height: 100vh，仅靠w-100 h-100不够——Bootstrap 的h-100依赖父元素高度，而父元素往往没设高
autoplay 和 muted 为什么总失败
现代浏览器（Chrome、Safari、Edge）强制要求视频自动播放必须静音，否则会被策略拦截，控制台报错：The request is not allowed by the user agent or the platform in the current context。这不是 Bootstrap 问题，是浏览器策略：
- 必须同时设置
autoplay、muted、playsinline（iOS 必需）三个属性 - 不要依赖 JavaScript 触发
play()—— 用户手势缺失时仍会失败；若非要 JS 控制，需绑定在click或touchstart上 - 视频格式优先用
.mp4（H.264），避免.webm在 Safari 的兼容问题
移动端适配和性能陷阱
全屏视频在手机上极易出问题：自动播放被禁、横竖屏切换错位、耗电发热、首屏加载延迟。Bootstrap 的响应式类帮不上忙：
- 用媒体查询单独处理 iOS：加
@supports (-webkit-overflow-scrolling: touch)修复 Safari 视频缩放 bug - 视频文件务必压缩——建议 ≤3MB，分辨率 720p 足够，用
ffmpeg命令：ffmpeg -i in.mp4 -vcodec libx264 -crf 28 -vf "scale=1280:-2" out.mp4 - 加
poster属性指向首帧图，避免白屏；同时给<video></video>加preload="metadata"，而非"auto" - 别在
background-video上叠加 Bootstrap 的.jumbotron或.card—— 它们的阴影/圆角/内边距会破坏视觉统一性，改用纯<div> + 工具类控制文字层 <h3>为什么不用 Bootstrap 的 <code>carousel做视频轮播Bootstrap
carousel是为图片设计的，内部用transform切换，对video元素支持极差：暂停、音轨、播放状态全部丢失，且无法响应loadeddata等事件。真实项目中应避开：- 轮播需求必须自建逻辑：用
setInterval+load()+play()控制，每次只保留一个<video></video>实例 - 切视频时加淡出过渡（CSS
opacity动画），别依赖carousel-fade类——它对video不生效 - 移动端切视频前先
pause()当前实例，否则多个视频同时加载会卡死
真正难的不是写几行 CSS，而是视频资源交付质量、浏览器策略适配、以及用户实际设备上的表现一致性——这些没法靠 Bootstrap 类名解决，得逐个设备真机测试，尤其是 iOS 17+ 和 Android Chrome 120+ 的 autoplay 行为差异。
- 轮播需求必须自建逻辑：用
