javascript - 保持视频纵横比最大为 100% 的宽度和高度

Question

我想在“弹出窗口”中使用他们的嵌入代码来集成 YouTube 视频。

我的问题是视频不限制其父级的高度。我希望它不要高于包含视频的 div#pop-up。现在它会尽可能地变宽并保持它的纵横比在高度上，即使它超过了 parent 的高度。我想要的是让视频在 parent 的填充或边距内尽可能大，保持居中并保持纵横比 (16:9)。

我不想使用 jQuery，javascript 可能是一个选项。

*{
  margin:0;
  padding:0;
}
#pop-up{
  width:100%;
  height:100vh;
  padding:5%;
  box-sizing: border-box;
  background:rgba(0,0,0,0.2);
}

<div id="pop-up">
  <!--Youtube embed code-->
  <div style="position:relative;height:0;padding-bottom:56.25%"><iframe src="https://www.youtube.com/embed/ZLtNZuQzJ4w?ecver=2" width="640" height="360" frameborder="0" style="position:absolute;width:100%;height:100%;left:0" allowfullscreen></iframe></div>
</div>

这是我想要的视觉示例:

使用宽屏浏览器，如电脑或横屏手机:

使用纵向手机或平板电脑等高大浏览器:

Answer 1

我对您的样式做了一些更改。

请看看这是否适合你。

正如您在下面看到的，这就是您要求的方式:

@media (max-width: 1024px) {
  body #pop-up iframe {
    max-height: 34.6vh;
  }
}

* {
  margin: 0;
  padding: 0;
}

#pop-up {
  width: 100%;
  height: 100%;
  padding: 5%;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

#pop-up iframe {
  width: 100%;
  height: 100%;
  max-width: 1024px;
  max-height: 576px;
}

<div id="pop-up">
  <iframe src="https://www.youtube.com/embed/ZLtNZuQzJ4w?ecver=2" width="640" height="360" frameborder="0" allowfullscreen></iframe>
</div>