可以在具有最大宽度和最大高度的同时使视频响应吗？

Question

我试图将视频放置在我的页面上，该视频必须具有响应能力（始终16：9）。我发现了很多示例，它们基本上是相同的（在底部应用56.25％的填充）。但是，一旦我将最大高度和最大宽度应用于iframe（因为我不希望它填充整个页面），下面的内容就会开始移开（由于填充）。

https://jsfiddle.net/12npu2zu/

#video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}

iframe {
    position: absolute;
    top: 0;
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    max-width: 1000px;
    max-height: 563px;
}

有没有办法阻止它这样做？最大宽度为1000像素，最大高度为563像素（16：9）。

Answer 1

这是您要寻找的东西吗，我只是将所有这些包裹在一个div中并添加了相同的样式。

<div class="video-holder">
  <div id="video-container">
      <iframe width="1000" height="563" src="https://www.youtube.com/embed/U4oB28ksiIo" frameborder="0" allowfullscreen>        </iframe> 
  </div>
  <p>This should stay right underneath the video</p>
</div>

CSS：

 #video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}

iframe {
    position: absolute;
    top: 0;
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    max-width: 1000px;
    max-height: 563px;
}
.video-holder{
    display: inline-block;
    width: 100%;
    height: 100%;
    max-width: 1000px;
    max-height: 563px;
}

https://jsfiddle.net/326w5jqj/