控制具有响应 iframe 的包装 div 的高度答案

【问题标题】：Control height of wrapper div which have responsive iframe控制具有响应 iframe 的包装 div 的高度
【发布时间】：2016-11-17 17:25:30
【问题描述】：

我有一个 div，其中有一个 youtube/iframe 视频，并且我已使视频具有响应性，但我想控制不起作用的包装器的最大高度

这是我的代码

问题目前如果我将包装器放在全宽高度 div 中，它的覆盖屏幕，但我想在其上应用最大宽度和高度

.video_case {
  float: none;
  clear: both;
  width: 100%;
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
  max-height: 300px;
}
.video_case iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

<div class="video_case">
  <iframe src="https://www.youtube.com/embed/Rsa7a_a2H8I?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

【问题讨论】：

有什么问题？
试图控制容器的高度，现在是它的覆盖屏幕
那你为什么要使用 height:100% ??
height:100% 用于 iframe，但我想控制 div 而不是 iframe
@SanjeevK 你想要这样jsfiddle.net/eq38cnmg

标签： jquery html css iframe

【解决方案1】：

在查看了很多相关帖子后，我发现我应该在 iframe 上应用 max-height 并解决了我的问题，所以我只是在其中定义了 max-height 值。

.video_case iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%
   max-height:400px;
}

【讨论】：