要让video真正撑满视口，需用position: fixed;配合top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: -1;并处理移动端autoplay限制、响应式降级、Bootstrap布局冲突及性能适配问题。
怎么让 <video> 真正撑满整个视口
直接设 width: 100%; height: 100%; 不行——它会按父容器尺寸拉伸，而父容器往往没占满视口。关键不是“填满盒子”，而是“覆盖视口”。
- 必须用
position: fixed;或position: absolute;脱离文档流，再配合top: 0; left: 0; width: 100vw; height: 100vh; -
object-fit: cover;不可少，否则视频会被强行拉变形或留黑边 - 别忘了加
z-index: -1;，否则视频会盖住所有内容（包括导航栏、按钮） - 如果父元素有
overflow: hidden;，视频可能被意外裁剪——检查 body 和最外层 wrapper
为什么 autoplay + muted 在移动端经常失效
因为 iOS 和 Android 大部分浏览器禁止自动播放有声视频，即使你写了 autoplay 和 muted，也可能被策略拦截，尤其在 Safari 中。
- 必须同时写
autoplay、muted、playsinline（iOS 必需） - 某些安卓 WebView 或微信内置浏览器仍会静音但不播放——这时要监听
canplay或loadeddata事件，失败时 fallback 到静态图 - 不要依赖
loop单独工作：有些设备首次加载后不会自动重播，建议加 JS 监听ended后调用play()
如何用媒体查询优雅降级到图片背景
不是“小屏就关掉视频”，而是“小屏换更省资源的方案”。移动设备放高清 MP4 往往卡顿、耗电、浪费流量。
- HTML 结构里保留
<video>和一个带class="fallback-image"的<div>，两者同级 - CSS 中默认隐藏图片、显示视频；在
@media (max-width: 768px)里反过来：.video-background { display: none; }，.fallback-image { display: block; background: url(...); } - 别用
background-image直接设在 video 标签上——它不会生效，<video>不支持该属性
Bootstrap 4/5 里和栅格系统打架怎么办
很多人把 <video> 塞进 <div class="container"> 或 <div class="row">，结果被 padding/margin 挤出白边，或高度塌陷。
- 视频背景不该放在 Bootstrap 栅格内部——它属于“全局视觉层”，应置于
<body>直接子元素，或紧贴<main>外层 - 如果要用 Bootstrap 类控制内容区域（如居中表单），确保内容容器有
position: relative;，避免被视频的fixed定位影响布局流 - 慎用
vh单位配合.container-fluid：某些手机浏览器（尤其是 iOS）滚动时100vh会误算地址栏高度，导致底部露白——可改用min-height: 100vh;+height: auto;组合兜底
prefers-reduced-motion）时，连 fallback 图片都该考虑是否跳过。这些判断点，比写对那几行 CSS 更容易被忽略。 
