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

有没有办法阻止它这样做？最大宽度为1000px，最大高度为563px（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/

Answer 2

所以我最终做的是在容器中放置透明图像。然后我将这个CSS应用于所有项目：

#video-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

img {
    display: block;
    opacity: 0;
    width: 100%;
}

iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0 none;
}

自己动手：https://jsfiddle.net/12npu2zu/2/

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

2 个答案: