video元素不能直接用button控制宽高比，因其是替换元素，宽高比由元数据决定；必须通过切换父容器的aspect-ratio类名，配合object-fit统一控制视频与poster渲染。
video 元素不能直接用 button 控制宽高比
HTML 的 <video></video> 标签本身不提供“画面比例切换”这种交互式 API，width 和 height 属性是静态的，硬写像素值会破坏原始宽高比，且无法响应按钮点击动态调整。真正可控的是它的**父容器 + CSS 渲染行为**。
所谓“一键切换”，本质是：点击按钮 → 切换容器的 aspect-ratio 值（或 fallback 的 padding-top）→ 同时同步更新 object-fit 行为 → 视频内容按新规则重排布。
- 不要试图给
<video></video>直接设style="width: 100%; height: 56.25vw"—— 这在缩放/旋转/横竖屏下极易错位 - 不要用 JS 动态改
video.width/video.height属性 —— 它们只影响固有尺寸，不触发 CSS 比例逻辑 - 避免混用
aspect-ratio和padding-bottom同一元素 —— 浏览器可能忽略后者或产生冲突
用 class 切换容器比例最稳妥
把不同比例封装成 CSS class，按钮只负责 toggle class，让浏览器自然重绘。例如：
.video-container { width: 100%; }
.video-container.aspect-16x9 { aspect-ratio: 16 / 9; }
.video-container.aspect-4x3 { aspect-ratio: 4 / 3; }
.video-container.aspect-1x1 { aspect-ratio: 1 / 1; }
video { width: 100%; height: 100%; object-fit: cover; }
JS 只需：
document.getElementById('btn-16x9').onclick = () => {
container.classList.remove('aspect-4x3', 'aspect-1x1');
container.classList.add('aspect-16x9');
};
- 必须确保
container是<video></video>的直接父级，否则aspect-ratio不生效 - 旧浏览器（如 Android 4.4 WebView）不支持
aspect-ratio，要用@supports not (aspect-ratio: 1 / 1)加 fallback - 切换后如果视频卡顿或黑屏，大概率是容器高度塌陷——检查是否误删了
width: 100%或父级有overflow: hidden
poster 和首帧跳变问题必须同步处理
点击按钮切比例后，如果封面图（poster）和视频第一帧看起来“不一样大”或“位置偏移”，不是 bug，而是 object-fit 对 poster 和视频帧一视同仁，但你没统一控制它们的缩放基准。
- 所有比例模式下，
object-fit必须显式声明（不能依赖浏览器默认），否则 poster 可能拉伸、视频帧可能留黑边 - 若用
object-fit: cover，poster 图片必须和视频原始分辨率同比例裁切，否则放大后模糊 - 不要给
<video></video>设position: absolute—— 这会让 poster 渲染坐标脱离容器，切换 class 时错位更明显 - 移动端 Safari 有时会在切换后缓存旧 poster 尺寸，加
poster="${url}?t=${Date.now()}"强制刷新（仅调试用）
移动端全屏与比例切换的冲突点
在 iOS 上点“全屏按钮”再切比例，常出现画面挤压或空白，因为 webkit-playsinline 和 playsinline 属性会影响容器渲染上下文。
- 全屏状态下，
document.fullscreenElement是<video></video>，此时修改其父容器 class 无效 —— 要监听fullscreenchange，退出全屏后再切比例 - Android Chrome 全屏后会忽略
aspect-ratio，只认width/height像素值，建议全屏时禁用比例切换按钮 - 如果用了
<iframe></iframe>嵌入播放器，必须带allow="fullscreen; picture-in-picture"，否则比例切换后全屏失败静默无提示
比例切换不是纯视觉调整，它牵扯容器布局、poster 渲染、全屏状态、移动端适配四个耦合层。最容易被忽略的是：你以为在切视频比例，其实是在切容器的 CSS 布局上下文 —— 而这个上下文，在不同设备、不同全屏状态里，根本不是同一个东西。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
