视频背景在移动端需muted+autoplay+playsinline组合才能自动静音播放，缺一不可；仅CSS或JS设静音无效，有声播放须用户手势触发；全屏覆盖需absolute定位、object-fit:cover及父容器relative+高度设置。
视频背景在移动端是否自动静音播放
绝大多数移动浏览器（ios safari、android chrome）会阻止自动播放带声音的视频，即使设置了 autoplay。必须显式添加 muted 和 playsinline 属性，否则视频在 ios 上根本不会启动。
-
<video autoplay muted playsinline loop></video>是最低要求组合，缺一不可 - 仅靠 CSS 设置
volume: 0或 JS 调用video.muted = true无法绕过 iOS 的 autoplay 策略 - 如果需要音频，必须由用户手势（如点击按钮）触发
play()，且首次触发后才能解除静音限制
如何让视频真正填满整个 Hero 区并响应式裁剪
直接把 <video></video> 放进 <div class="hero"> 容器里，不加额外样式时，它默认按原始宽高比拉伸，上下/左右常留白或溢出。关键不是“撑满”，而是“覆盖裁剪”。
<ul>
<li>给 <code><video></video> 设置 position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
.hero）必须设 position: relative; 和明确高度（如 min-height: 100vh;）background: url(...) 方式加载视频——CSS 不支持 background-video，只能用 <video></video> 元素object-fit: cover 保证等比缩放并裁剪，contain 会留白，fill 会变形Bootstrap 5 中如何与栅格系统和文字层叠配合
Bootstrap 的 .container、.row 默认居中且有 padding，但视频背景通常需要全宽铺满，文字内容再叠加其上。不能把 <video></video> 塞进 .container 里，否则会被限制宽度。
- 结构应为：
<section class="hero"><video></video><div class="hero-content"><div class="container">...</div></div></section> -
.hero-content需设position: absolute; top: 50%; transform: translateY(-50%);实现垂直居中（或用 Flex） - 文字层级要高于视频：确保
.hero-content的z-index> 视频的z-index（视频默认为 auto，设z-index: -1更稳妥） - 在小屏下，文字容易被视频暗部吞没，务必加半透明遮罩层（
<div class="hero-overlay">）或用 <code>text-shadow保可读性fallback 图片和性能优化怎么做
视频加载慢、格式不兼容或被禁用时，用户看到的是黑屏或空白。不能只依赖
<source></source>多格式声明，必须提供视觉 fallback。- 在
<video></video>内第一行放<img src="fallback.jpg" alt="Hero background">，它会在视频未加载或不支持时显示 - 推荐同时提供
.mp4（H.264）和.webm（VP9），覆盖所有主流浏览器；Safari 对.webm支持有限，.mp4是底线 - 视频分辨率不必太高：1080p 足够，导出时用 H.264 编码 + CRF 23–28，文件控制在 3–5MB 内；太大导致首屏延迟明显
- 加
preload="metadata"（而非"auto"），减少初始加载压力
视频元素本身没有“响应式 srcset”，所以不同屏幕尺寸用同一份视频源是常态；真正影响体验的是压缩质量与 CDN 分发，而不是分辨率切换。
- 在
