video标签直接加aspect-ratio无效，因其为替换元素，宽高由内容或内联尺寸控制；需显式设width: 100%、height: auto，并配合object-fit: cover/contain才能生效。
video标签直接加aspect-ratio为什么没效果
因为<video></video>默认是替换元素（replaced element），其宽高由内容或内联尺寸控制，aspect-ratio在部分浏览器里对替换元素支持不一致——尤其当width或height被显式设为auto或未设置时，比例可能被忽略。
- 必须给
<video></video>显式设置width: 100%，且height: auto或不设height -
aspect-ratio需配合object-fit: cover或contain才能真正约束显示区域，否则视频可能拉伸或留黑边 - 旧版Chrome（aspect-ratio作用于
<video></video>，得降级用padding-top技巧
用CSS容器包裹video实现可靠响应式比例
这是目前最稳妥的做法：不依赖<video></video>自身支持aspect-ratio，而是用一个<div>容器撑开空间，再让<code><video></video>绝对定位填满。兼容性好，逻辑清晰。
- 容器设
position: relative和aspect-ratio: 16 / 9（或padding-top: 56.25%作为fallback） -
<video></video>设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 务必加
object-fit: cover（推荐）或object-fit: contain，否则视频会变形 - 如果需要居中裁剪，可加
object-position: center
<div class="video-container">
<video controls>
<source src="demo.mp4" type="video/mp4">
</video>
</div>
.video-container {
position: relative;
aspect-ratio: 16 / 9;
width: 100%;
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
Bootstrap 5.x里怎么复用现有工具类
Bootstrap 5.3+原生支持aspect-ratio工具类（如ratio ratio-16x9），但仅适用于容器，且默认不包含object-fit——你得自己补。
- 用
<div class="ratio ratio-16x9">包裹<code><video></video>，它内部用padding-top实现比例 - Bootstrap的
.ratio类不设position，需手动加position-relative - 必须额外加
class="w-100 h-100 object-fit-cover"到<video></video>上（Bootstrap 5.3+才带object-fit-系列工具类） - 若用旧版Bootstrap（object-fit-类，就得自己写CSS或内联
style="object-fit: cover" - 务必加
playsinline和webkit-playsinline属性：<video playsinline webkit-playsinline></video> - 避免在
aspect-ratio容器上同时设max-width和width: 100%，iOS Safari可能计算错高度 - 横屏旋转后，部分安卓WebView不会重触
aspect-ratio，建议监听resize事件并强制重绘容器（例如el.style.transform = 'scale(1)'） - 如果视频源分辨率远高于容器，记得加
preload="metadata"减少首帧加载延迟
移动端自动全屏与横竖屏适配的坑
iOS Safari对<video></video>有强制全屏策略，即使加了playsinline，某些场景下仍会跳转——这时aspect-ratio容器反而更容易失控。
立即学习“前端免费学习笔记（深入）”；
aspect-ratio本身不难，难的是它和object-fit、playsinline、浏览器渲染管线之间的隐式耦合——漏掉任意一环，视频就可能错位、拉伸或闪退。
