视频容器不随屏幕缩放的主因是未同时设置 max-width: 100% 和 height: auto，且缺少 display: block；父容器宽度未受限、存在 min-width 或固定 height，以及 iframe 嵌入未用 padding-bottom 等比缩放，均会导致失效。
视频容器不随屏幕缩放的常见原因
直接给 <video></video> 标签设 width: 100% 通常无效，因为浏览器默认会按原始尺寸渲染，且 height 未设为 auto 时容易拉伸或留白。更关键的是，父容器没限制宽度、或存在 min-width 等干扰样式，也会卡住缩放行为。
max-width: 100% + height: auto 必须同时生效
单独用 max-width: 100% 不够——它只限制最大宽度，但高度若固定（比如 height: 400px），视频就会变形；而只设 height: auto 又可能撑破容器。二者必须配合，并作用于同一元素：
video {
max-width: 100%;
height: auto;
display: block; /* 防止底部多出空白 */
}- 必须加
display: block，否则height: auto在内联元素上表现异常 - 不要给父容器设固定
height，否则会压制子元素的auto计算 - 如果用了
object-fit（如cover），需确认父容器有明确宽高约束，否则auto失效
响应式嵌入 iframe 视频（如 YouTube）要额外处理
第三方 iframe 不受你 CSS 直接控制，max-width 对其内部内容无效。正确做法是包裹一层容器，用 padding-bottom 实现等比缩放：
<div class="video-wrapper"> <iframe src="..."></iframe> </div>
.video-wrapper {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 比例 */
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}- 比例值 = 高 ÷ 宽 × 100%，16:9 是
56.25%，4:3 是75% - 不能省略
position: absolute，否则 iframe 会脱离 padding 占位流 - 部分 iframe（如 Vimeo）支持
allowfullscreen，但不影响缩放逻辑
移动端 Safari 中 height: auto 失效的坑
iOS Safari 对 <video></video> 的 height: auto 支持不稳定，尤其在旋转屏幕后可能卡住旧高度。临时解法是强制重绘：
立即学习“前端免费学习笔记（深入）”；
video {
max-width: 100%;
height: auto;
min-height: 1px; /* 触发 Safari 重新计算 */
}
@media (orientation: landscape) {
video {
min-height: 2px; /* 微调触发重排 */
}
}- 不用 JS 强制
offsetHeight也能缓解，但加min-height更轻量 - 如果启用了
playsinline属性，确保同时设webkit-playsinline，否则全屏控件可能干扰布局 - 真机调试时，用 Safari 开发者工具检查 computed height 是否随窗口变化更新
实际缩放是否生效，最终取决于父容器是否真正“可收缩”——很多问题表面是视频没缩放，根源其实是外层 div 被 white-space: nowrap、浮动残留或 flex 布局中的 min-width: auto 锁死了宽度。
