必须用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 包一层

原生 在部分旧浏览器（如 Safari 15.4 之前）不支持 aspect-ratio，但父容器支持。所以得套个

：

• 给 wrapper 设置 aspect-ratio: 16 / 9（或你实际视频比例，比如 4 / 3、21 / 9）
• 设 width: 100%，让 wrapper 自适应父容器宽度
• video 设为 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;
}</p>

为什么不用 transform: scale() 缩放整个 video？

缩放会破坏点击热区、影响字幕定位、且播放控件（尤其是自定义控件）位置偏移，容易出 bug：

• scale(0.8) 后，鼠标点击坐标没变，但元素视觉位置变了 → 点击失效或错位
• video 内嵌的 字幕位置计算基于原始尺寸，缩放后字幕飘走
• 移动端 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 直接子项上。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！