下面是一个Fiddle的解决方案，它基于一个CSS 2秘密：https://jsfiddle.net/59f9uc5e/2/

<div class="aspect-ratio">
  <iframe src="" width="550" height="275" frameborder="0"></iframe>
</div>

<style>
/* This element defines the size the iframe will take.
   In this example we want to have a ratio of 25:14 */
.aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* The height of the item will now be 56.25% of the width. */
}

/* Adjust the iframe so it's rendered in the outer-width and outer-height of it's parent */
.aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
</style>

通过如何处理填充百分比值来解释：
该百分比是根据所生成框的包含块的宽度计算的，即使对于“padding-top”和“padding-bottom”也是如此。
https://www.w3.org/TR/CSS2/box.html#padding-properties

使用新的CSS windows 单位vw和vh（ windows 宽度/ windows 高度）

iframe {
    width: 100vw; 
    height: 56.25vw; /* 100/56.25 = 560/315 = 1.778 */
    background:red;  
}

浏览器支持也很好：IE9+（caniuse）

Calc函数使其可读性更强：

.iframe-video {
    width: 755px;
    height: 424px;
    max-width: 100%;
    max-height: calc((100vw - 40px) / (16/9));
}

• width和height大小适用于桌面，也可回退到早期的浏览器
• 40px是边距（两侧iframe边框和视口边框之间20像素）
• 16/9是视频的比率（如果您有窄边框播放器）

使用css aspect-ratio，这很容易。

iframe {
  height: auto;
  width: 100%;
  aspect-ratio: 16 / 9;
}

<div>
  <div style="position:relative;padding-top:56.25%;">
    <iframe src="https://www.youtube.com/embed/nckseQJ1Nlg" frameborder="0" allowfullscreen
      style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe>
  </div>
</div>

请将此样式添加到您尝试加载的Web URL内容中。它将保持16：9的纵横比。

这是一种hackish，但你可以使用图像来保持视频的纵横比。例如，我去油漆和保存一个1280 x 720分辨率的图像使用16：9的纵横比（在这里，我只会从互联网上的某个地方抓一个空白图像）。
这是因为如果您在保持高度自动的同时更改图像的宽度，反之亦然，图像将自动缩放-保持比例。
第一个

我遇到了同样的问题，这对我很有效：

.wrapper iframe{
 
width: 100%; /* This Forces video to 100% of parent's width */
height:unset; /* This Overwrites the height attribute of Youtube's embed code */
aspect-ratio: 16 / 9; /* This adjusts video height to keep the desired aspect ratio*/

}