video标签默认不响应式，必须设max-width:100%、height:auto，并用aspect-ratio（作用于父容器）或padding-top兜底维持宽高比，同时注意autoplay需配合muted及移动端全屏行为。
video 标签默认不响应式，必须手动重置宽高行为
浏览器对 <video> 的默认样式是「固定宽高」，即使父容器缩放，video 本身也不会自动拉伸。单纯写 width: 100% 不够，因为它的 height 会塌陷或溢出，导致画面被裁切或留黑边。
关键不是“让视频变宽”，而是“让视频按比例撑满容器”。常见错误是只设 width: 100% 却忽略 height: auto 或宽高比约束。
- 必须给
<video>设置height: auto，否则高度由浏览器默认（通常约 150px）锁定 - 如果父容器本身没明确高度（比如仅靠内容撑开），
height: 100%会失效——它依赖父级有可计算的高度 - 想保持 16:9 等比例？不能只靠 CSS 宽高，得用 padding-top 技巧或
aspect-ratio（注意兼容性）
用 aspect-ratio 实现真正语义化的宽高比控制
aspect-ratio 是现代方案，一行 CSS 就能声明「不管宽度多少，始终维持某宽高比」，比传统 padding-top 更直观、更易维护。
但要注意：Chrome 88+、Firefox 89+、Safari 15.4+ 才支持；旧版 Safari 需要 -webkit-aspect-ratio 前缀（实际未被广泛实现），所以生产环境建议降级处理。
立即学习“前端免费学习笔记（深入）”；
- 写法：
aspect-ratio: 16 / 9（注意斜杠两边有空格） - 配合
width: 100%和height: auto使用，三者缺一不可 - 若需兼容 IE 或老 Safari，得回退到「容器 padding-top + absolute 定位子元素」的老办法
<div class="video-wrapper">
<video controls>
<source src="demo.mp4" type="video/mp4">
</video>
</div>
.video-wrapper video { width: 100%; height: auto; aspect-ratio: 16 / 9; }
移动端全屏时 video 容器被遮挡或错位怎么办
iOS Safari 在横屏进入原生全屏播放时，会把 <video> 提升到顶层并脱离 DOM 流，此时你写的 CSS 容器完全失效。这不是布局问题，而是浏览器行为。
这意味着：你在页面里写的 max-width、padding、甚至 z-index 对全屏状态下的视频画面毫无影响。唯一可控的是「退出全屏后回归的样式」。
- 别试图用 JS 监听
webkitbeginfullscreen来动态改样式——时机难控，且部分事件已被弃用 - 确保
<video>外层没有transform、perspective或will-change，这些可能干扰 iOS 全屏入口检测 - 如果视频嵌在 modal 或 fixed 定位区域里，全屏退出后容易定位错乱，建议全屏前先移出嵌套结构（用 JS 临时 appendTo(document.body)）
autoplay 和 muted 在响应式场景下的隐藏限制
很多响应式页面希望「进入视口即自动播放」，但 Chrome、Safari 强制要求 muted 才允许 autoplay，且该策略与布局无关，但和设备尺寸间接相关——比如平板横屏常被识别为桌面，而手机竖屏更可能触发静音策略。
- 必须同时写
autoplay和muted属性，缺一不可：<video autoplay muted> - 仅加
muted不保证静音生效，某些安卓 WebView 需额外加volume="0" - 如果用户后续手动取消静音，
volume会恢复，但不会自动解除 mute 状态——这是预期行为，不是 bug
响应式不只是尺寸适配，更是交互路径适配。视频在小屏上点一下才播放，和在大屏上自动静音播放，背后是同一套策略在不同上下文里的落地差异。
