设置max-width后如何保持YouTube嵌入iframe的宽高比例？

方案说明 #

• 仅使用CSS即可完成需求，无需引入jQuery或其他脚本工具，兼容性覆盖几乎所有主流浏览器。
• 核心实现逻辑是固定比例父容器占位法，利用CSS padding百分比基于父元素宽度计算的特性，实现容器宽高比锁定。

具体实现步骤 #

1. 调整HTML结构 #

给你的iframe外层包裹一个自定义类的父容器，示例如下：

<div class="video-container">
  <iframe id="you" src="https://www.youtube.com/embed/rMCILWXXXXX" frameborder="0" allowfullscreen></iframe>
</div>

可以移除iframe上原本的width、height属性，无需额外设置行内样式。

2. 添加对应的CSS样式 #

.video-container {
  position: relative;
  width: 100%;
  /* 16:9比例计算公式：高度/宽度*100% = 378/672*100% = 56.25% */
  padding-top: 56.25%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

原理说明 #

CSS中padding的百分比值是基于父元素的宽度计算的，因此给.video-container设置padding-top: 56.25%后，容器的高度会永远等于宽度的56.25%，刚好匹配16:9的视频比例。iframe通过绝对定位填满整个父容器，宽高会自动跟随父容器同步缩放，完美解决小屏设备下高度无法等比例调整的问题。

可选优化 #

如果需要限制视频最大宽度不超过原来的672px，可以给容器加上最大宽度限制：

.video-container {
  position: relative;
  width: 100%;
  max-width: 672px;
  padding-top: 56.25%;
  /* 可选：大屏下居中显示 */
  margin: 0 auto;
}

内容的提问来源于stack exchange，提问作者whitebear