必须用div包裹video并设aspect-ratio: 16 / 9、width: 100%、max-width: 100vw，video设width: 100%、height: 100%、object-fit: cover，因video是替换元素，自身不响应aspect-ratio。
直接用 aspect-ratio + max-width + height: auto 就能实现，不需要 JS 计算、也不依赖 transform: scale()。
video 元素本身不响应 aspect-ratio？用 wrapper 包一层
原生 <video></video> 在部分旧浏览器（如 Safari 15.4 之前）不支持 aspect-ratio，但父容器支持。所以得套个 <div>：<ul>
<li>给 wrapper 设置 <code>aspect-ratio: 16 / 9（或你实际视频比例，比如 4 / 3、21 / 9）
width: 100%，让 wrapper 自适应父容器宽度width: 100%; height: 100%，并加 object-fit: cover 或 contain 控制裁剪方式<div class="video-wrapper">
<video src="demo.mp4" controls></video>
</div>
<p>.video-wrapper {
aspect-ratio: 16 / 9;
width: 100%;
max-width: 100vw;
}
.video-wrapper video {
width: 100%;
height: 100%;
object-fit: cover;
}为什么不用 transform: scale() 缩放整个 video？
缩放会破坏点击热区、影响字幕定位、且播放控件（尤其是自定义控件）位置偏移，容易出 bug：
-
scale(0.8)后，鼠标点击坐标没变，但元素视觉位置变了 → 点击失效或错位 - video 内嵌的
<track></track>字幕位置计算基于原始尺寸，缩放后字幕飘走 - 移动端 touch 事件区域同样偏移，尤其在 iOS Safari 上更明显
- 缩放还可能触发 subpixel 渲染问题，导致边缘模糊
遇到黑边/拉伸？检查 object-fit 和父容器约束
常见错误是只设了宽高比，但没控制内容填充方式：
Kibana Saved Objects
下载
通过 REST API 管理 Kibana 保存的对象（仪表板、Lens 可视化等）。适用于：① 以编程方式创建、更新、删除仪表板和 Lens 可视化。
立即学习“前端免费学习笔记（深入）”；
-
object-fit: cover→ 填满容器，可能裁剪上下/左右（推荐用于大屏背景视频） -
object-fit: contain→ 完整显示，留黑边（适合教学类、需看清全画面的场景） - 如果父容器有
overflow: hidden且用了cover，要确认是否真需要裁剪 - 避免同时设
width和height固定值 —— 会覆盖aspect-ratio的作用
需要兼容 IE 或老 Android？降级用 padding-top 魔法
aspect-ratio 在 IE 完全不支持，Android 4.4 WebView 也无此属性。此时用经典方案：
- wrapper 设
position: relative，宽 100%，不设高 - 内部伪元素或子 div 设
padding-top: 56.25%（16:9）或75%（4:3） - video 绝对定位填满该区域
.video-wrapper::before {
content: "";
display: block;
padding-top: 56.25%; /* 16:9 */
}
.video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}这个写法在所有现代浏览器和 IE11 都稳定，但注意：它依赖块级元素的 padding 百分比按宽度计算，不能用在 flex 或 grid 直接子项上。
