视频容器在移动端溢出是因为video默认为内联替换元素、宽度固定且不响应父容器，需用padding-bottom配合absolute定位模拟宽高比；标准写法要求容器设position: relative、width: 100%、height: 0、padding-bottom: 56.25%，子video设absolute、top/left: 0、width/height: 100%。
视频容器为什么在移动端会溢出？
因为 <video> 默认是内联替换元素，宽度固定为 320px（部分浏览器），且不响应父容器变化。直接设 width: 100% 也不行——它只缩放内容区域，不约束比例，容易压扁或留黑边。
真正要解决的不是“怎么让视频变小”，而是“怎么让容器按宽高比自适应、再让视频填满它”。核心是用 padding-bottom 配合绝对定位模拟固有宽高比。
- 常见错误：只给
<video>加width: 100%; height: auto→ 横向撑破父容器，尤其在 iOS Safari 中失效 - 正确思路：用外层
<div class="video-container">控制宽高比，内部<video>绝对定位铺满 - 16:9 宽高比对应
padding-bottom: 56.25%（9 ÷ 16 × 100%），4:3 是75%
标准响应式视频容器 HTML + CSS 写法
不需要 JS，纯 CSS 就能搞定。关键在于结构和定位配合：
<div class="video-container">
<video controls poster="cover.jpg">
<source src="video.mp4" type="video/mp4">
</video>
</div>对应 CSS：
立即学习“前端免费学习笔记（深入）”；
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 */
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* 或 contain，按需选 */
}-
object-fit: cover会裁剪边缘但填满，适合封面一致的场景；contain保持完整但可能留黑边 - 必须设
position: relative在容器上，否则absolute的<video>会相对 body 定位 - 如果视频源支持 WebM，建议加
<source>备用，避免 Safari 播放失败
移动端自动播放被阻止怎么办？
iOS 和 Android Chrome 默认禁止无用户交互的自动播放（尤其带声音）。这不是响应式问题，但常被一起遇到。
- 加
muted属性是硬性前提：<video muted autoplay> - 必须同时加
playsinline（iOS 全屏限制）：<video muted autoplay playsinline> - 仍可能被拦截？说明页面未获得媒体权限——首次播放需用户点击触发，后续才能调用
play() - 不要依赖
autoplay做关键逻辑，比如首屏视频广告，得设计 fallback 按钮
iframe 嵌入 YouTube/Vimeo 怎么响应式？
第三方 iframe 不受你 CSS 控制，不能直接套上面的 .video-container。要用属性 + CSS 双保险：
<div class="video-container">
<iframe src="https://www.youtube.com/embed/xxx"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>- iframe 必须去掉
width和height属性，否则会覆盖 CSS - CSS 同样用
padding-bottom+absolute，但 iframe 要额外加width: 100%; height: 100% - Vimeo iframe 需要加
?dnt=1参数禁用追踪，否则某些隐私模式下加载失败
宽高比计算和视频容器一样，只是把 <video> 换成 <iframe>，别漏掉 allowfullscreen —— 没它，全屏按钮在 iOS 上不可见。
