应使用CSS容器控制宽高比而非video内联属性：现代方案用aspect-ratio+object-fit，兼容方案用padding-bottom技巧，并避免内联宽高、未设父宽等常见错误。
让视频播放器在缩放时保持固定宽高比，核心是**不依赖 video 或 iframe 的内联 width/height 属性**，而是用 CSS 控制容器比例，并让视频内容在其中按规则适配。直接写 width="640" height="360" 会导致响应式失效、画面拉伸或错位。
用容器 + aspect-ratio（现代推荐）
这是目前最简洁、语义清晰的方式，适用于 Chrome 88+、Firefox 89+、Safari 15.4+ 及更新版本：
- 给包裹容器设 width: 100% 和 aspect-ratio: 16 / 9（或 4 / 3 等）
- 内部 video 或 iframe 设 width: 100%; height: 100%，再加 object-fit: contain（全显）或 cover（填满）
- 务必移除 video 标签上的 width/height 属性，否则会干扰 CSS 计算
- 示例结构：
<div class="video-wrap"><video src="..."></video></div>
.video-wrap { width: 100%; aspect-ratio: 16 / 9; }
.video-wrap video { width: 100%; height: 100%; object-fit: contain; }
用 padding-bottom 技巧（兼容老浏览器）
当需支持 Safari 14、旧版 Android WebView 或 IE 时，这是最稳妥的方案：
- 容器设 position: relative; width: 100%; height: 0; padding-bottom: 56.25%（16:9 → 9÷16×100%）
- 子元素（video 或 iframe）设 position: absolute; top: 0; left: 0; width: 100%; height: 100%
- padding-bottom 的百分比基于父容器宽度计算，天然实现等比缩放
- 注意：不能用 height: 56.25%，因为 height 百分比在非绝对定位下无效
搭配 object-fit 控制画面呈现方式
仅设宽高比还不够，还需决定视频如何填充容器：
- object-fit: contain —— 完整显示，留黑边；适合教学、演示类视频
- object-fit: cover —— 填满容器，可能裁剪边缘；适合封面、背景视频
- 使用 cover 时，建议给容器加 overflow: hidden 防止溢出
- 该属性对 video 和 iframe 都有效，但 iframe 需确保嵌入源允许缩放（如 YouTube 支持）
避免常见错误
这些细节容易被忽略，却常导致比例失效：
- video 是替换元素，aspect-ratio 不可直接写在 video 上，写了也无效（开发者工具中显示为 inactive）
- 父容器没设 width，max-width: 100% 就无参照，video 会按固有尺寸渲染
- 同时用了内联 width/height 和 CSS width，后者默认覆盖前者，但可能破坏比例逻辑
- iframe 嵌入时，不要设 frameborder="0" 以外的尺寸属性，全部交由 CSS 控制
