iframe嵌入视频宽高比变形的主因是直接设固定height或忽略height导致浏览器按默认4:3渲染，而iframe不支持aspect-ratio且内联样式无法响应式控制比例；推荐用padding-top:56.25%配合position绝对定位实现兼容性最佳的16:9容器。
iframe嵌入视频时宽高比变形的常见原因
直接给 iframe 设 width="100%" 和固定 height，或只设 width 不设 height，浏览器会按默认宽高比（通常是 4:3）渲染，导致 16:9 视频被拉伸或留黑边。根本问题是：iframe 本身不支持 aspect-ratio（旧版 Safari 和部分 Android WebView 不支持），且内联样式无法响应式控制子内容比例。
用 padding-top 实现可靠 16:9 容器
这是兼容性最好、最稳定的做法——利用 padding-top 的百分比值基于父容器宽度计算的特性，构造一个「无高度依赖」的占位容器：
<div class="video-wrapper"> <iframe src="https://www.youtube.com/embed/xxx" frameborder="0" allowfullscreen></iframe> </div>
CSS 需这样写：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
.video-wrapper {
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%; /* 9 / 16 = 0.5625 */
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
-
padding-top: 56.25%是关键：它让容器高度始终为宽度的 56.25%，即 16:9 - 必须配合
position: relative+absolute子元素，否则iframe会撑开容器 - 不要给
iframe设width或height的具体像素值，否则破坏响应性 - 该方法在 IE9+、所有现代浏览器、甚至 iOS 8 Safari 中都稳定生效
现代方案：CSS aspect-ratio + object-fit（仅需支持较新环境）
如果你明确不需要支持 Safari ≤ 15.4 或 Chrome ≤ 88，可以用更简洁的写法：
.video-wrapper {
width: 100%;
aspect-ratio: 16 / 9;
}
.video-wrapper iframe {
width: 100%;
height: 100%;
object-fit: contain; /* 可选：避免裁切，保留黑边 */
}
-
aspect-ratio: 16 / 9直接声明比例，语义清晰，无需 hack -
object-fit对iframe的支持有限（实际效果取决于嵌入源是否允许缩放），多数视频平台（YouTube、Vimeo）会忽略它；真正起作用的是容器尺寸，不是iframe自身渲染逻辑 - 务必测试目标用户设备的实际渲染结果——比如某些 Android WebView 识别
aspect-ratio但不触发重绘
嵌入 YouTube/Vimeo 时额外注意的参数
即使容器比例正确，平台自身控件或默认行为仍可能干扰显示：
- YouTube：加上
&hd=1&controls=1&showinfo=0&rel=0参数可减少 UI 占比，避免底部控件溢出容器 - Vimeo：用
?dnt=1&badge=0&autopause=0&player_id=0&app_id=122963类似地精简界面 - 务必移除
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"中不必要的权限，尤其picture-in-picture在某些安卓版本下会导致 iframe 尺寸错乱 - 如果使用
loading="lazy"，注意 Safari 15.4 前不支持，可能导致首屏 iframe 渲染延迟或比例错乱
真正麻烦的不是怎么写，而是不同平台对 iframe 内容的 sandbox 策略和尺寸协商机制不一致——哪怕容器完美 16:9，YouTube 也可能因广告插入临时改变内部布局。上线前一定要在真机上横竖屏反复切换测试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
