如何将最大高度应用于 iframe 但将其保持在 100% 宽度？答案

【问题标题】：How can I apply a max-height to an iframe but keep it at 100% width?如何将最大高度应用于 iframe 但将其保持在 100% 宽度？
【发布时间】：2018-02-07 13:48:08
【问题描述】：

我正在创建 YouTube 提供视频源的相对（非固定）视频背景。

主父容器的最大高度为 600 像素，但这样做会切断 YouTube 视频的底部。有没有办法将 600px 的最大高度也应用到 iframe，但保持全宽和响应式？

HTML

<div id="video-container">
  <div class='embed-container'>
    <iframe src='https://www.youtube.com/embed/YOPnzvSrZd4?mute=1&controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=YOPnzvSrZd4&start=0' frameborder='0' allowfullscreen>
    </iframe>
  </div>
  <div class="video-area">
    <div class="video-table">
      <div class="video-cell">{video-area:content}</div>
    </div>
  </div>  
</div>

CSS

#video-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  max-height: 600px;
}
.video-area {
  position:absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.video-table {
  display:table;
  width:100%;
  height:100%;
  max-width: 960px;
  margin: 0 auto;
}
.video-cell {
  display:table-cell;
  vertical-align:middle;
  padding:2em;
  box-sizing: border-box;
}
.embed-container { 
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

【问题讨论】：

我想你是在问如何保持视频的正确纵横比，但不要让它超过 600 像素。当您使用宽屏幕时，视频将居中但保持宽高比，在较小的屏幕上您将获得全宽视频，因为高度小于 600 像素。这看起来对吗？代码中的视频是您尝试调整的实际视频，还是与预期视频的宽高比相同，或者您确定它是 4:3、16:9 还是其他？
没错！理想情况下，它会创建与 background-size:cover 和 background-position: 50% 50% 的图像相同的结果。如果可能的话，我想考虑所有类型的纵横比，但如果没有，上面的视频就可以了。
酷。你可以做到，我或其他人稍后会发布答案，但需要根据纵横比调整样式。不幸的是，它不会像 img 标签或背景大小包含的那样容易。技巧涉及 0 高度和百分比的顶部或底部填充子元素。
你就是那个人，@JasonB！非常感谢您花时间帮助我解决这个问题。
如果您在iframe 中使用max-height: 600px 的同时还使用height: 100%，视频将根据屏幕的width 很好地调整，而不会剪切视频。你试过@Weebs 吗？

标签： html css

【解决方案1】：

您可以通过将元素的高度设置为零并以百分比形式添加顶部或底部填充来保持元素的纵横比。第一次遇到它时似乎很奇怪，但百分比填充计算的是父元素宽度的百分比。

视频似乎不是标准的 4:3 或 16:9，而是更像 2:3，所以我在父容器上设置了 max-height:600px; max-width:900px;。子容器有width:100%; height:0; padding-top:66.67%; 66.67% 的数字是 2/3（或 600/900），而不是某个幻数，因此您需要针对不同的纵横比进行调整。

就是这样。现在视频将填充小于 900 像素宽的屏幕宽度，并保持其 66.67% 的纵横比。一旦超过 900 像素的宽度，视频就会受到限制，因此高度不会超过 600 像素。我把margin:0 auto 放在它的中心，你会想要处理背景，让它在你的设计中看起来不错。

https://codepen.io/Jason_B/pen/BYLqod

【讨论】：

【解决方案2】：

我不确定这是否是一个 hack，但是当我遇到同样的情况时，这对我有用。您可以使用 flex 属性在父 div 中拉伸子 div。

对原来的结构做了一些改动：

#video-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  display:flex;
  height:600px;
  -webkit-align-items: stretch;
	-ms-align-items: stretch;
	-moz-align-items: stretch;
	-o-align-items: stretch;
	align-items: stretch;
}
iframe
{
  width:100%;
}
.video-area {
  position:absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.video-table {
  display:table;
  width:100%;
  height:100%;
  max-width: 960px;
  margin: 0 auto;
}
.video-cell {
  display:table-cell;
  vertical-align:middle;
  padding:2em;
  color:white;
  box-sizing: border-box;
}


.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div id="video-container">
 
    <iframe src='https://www.youtube.com/embed/YOPnzvSrZd4?mute=1&controls=0&showinfo=0&rel=0&autoplay=0&loop=1&playlist=YOPnzvSrZd4&start=0' frameborder='0' allowfullscreen>
    </iframe>
 
  <div class="video-area">
    <div class="video-table">
      <div class="video-cell">{video-area:content}</div>
    </div>
  </div>  
</div>

【讨论】：

【解决方案3】：

iframe
{
    height: -webkit-fill-available;
}

将此高度属性添加到您的 iframe

【讨论】：