video标签默认不响应式，需通过父容器设宽、移除内联宽高属性、CSS设width:100%;height:auto;max-width:100%;display:block及合理选用object-fit协同实现自适应。
video 标签默认不响应式，必须手动干预
HTML 的 <video> 元素本身没有内置的响应式行为。即使设了 width="100%"，它仍可能溢出容器、撑开父级或在移动端显示异常——根本原因是浏览器对替换元素（replaced element）的宽高处理逻辑特殊，width: 100% 仅作用于内容盒，且受 max-width、height、object-fit 和父容器约束共同影响。
用 CSS 实现真正自适应的关键三步
只加 width: 100% 不够，需同时控制三个层面：
-
父容器必须有明确宽度上下文：比如
<div>不能是display: inline或未设width的浮动元素；推荐用width: 100%或max-width: 100%的块级容器 -
video 本身要禁用内联 width/height 属性：删掉 HTML 中的
width和height属性（如width="640"），否则会覆盖 CSS 设置 - 用 CSS 显式声明尺寸与缩放行为：
video {
width: 100%;
height: auto; /* 保持宽高比，避免拉伸 */
max-width: 100%; /* 防止超父容器 */
display: block; /* 消除底部空白（inline 默认行为） */
}不同场景下 object-fit 的取舍
当视频容器宽高比和视频源不一致时，object-fit 决定如何填充——选错会导致裁切或留黑边：
-
object-fit: contain：完整显示，可能上下/左右留空；适合教学类全画面展示 -
object-fit: cover：填满容器，等比缩放后裁剪边缘；适合封面、海报式播放器（最常用） -
object-fit: fill：强行拉伸填满，会变形；一般不用 - 注意：
object-fit在 IE 中不支持，如需兼容需 fallback 方案（如 JS 监听 resize + 动态计算）
移动端常见失效原因和修复
在 iOS Safari 或部分 Android 浏览器中，<video> 可能无视 CSS 宽度，尤其出现在 flex/grid 容器里：
立即学习“前端免费学习笔记（深入）”；
- 检查是否用了
flex: 1或flex-grow: 1但没设min-width: 0—— flex 项默认最小宽度为内容宽度，会撑开 video - 给 video 加
min-width: 0和min-height: 0可破除 flex 默认限制 - 某些安卓 WebView 对
width: 100%解析异常，可加!important强制（慎用，仅调试时） - autoplay + muted 在移动端常被拦截，虽不影响宽度，但若 JS 动态插入 video 后再设样式，务必等 DOM 渲染完成再应用 CSS
真正起作用的不是某一行 magic CSS，而是 width、max-width、height:auto、object-fit、父容器约束这五者协同的结果。漏掉任意一环，都可能在某个设备上突然“不自适应”。
