Question

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

主要父容器的最大高度为600px，但在此过程中，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%;
}

Answer 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），而不是一些幻数，因此您需要针对不同的宽高比调整它。

那就是它。现在，视频将填充宽度小于900px的屏幕宽度，并保持其宽高比为66.67％。一旦超过900px宽度，视频就会受到限制，因此高度不会超过600px。我将margin:0 auto置于中心位置，您想要处理背景，以便在设计中看起来很好。

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

Answer 2

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

对原始结构进行了一些结构更改：

＆＃13;

#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%;
}

＆＃13;

<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>

＆＃13;

Answer 3

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

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

如何将最大高度应用于iframe但保持100％宽度？

3 个答案: