Css 在拥有最大宽度和最大高度的同时，是否可以使视频响应迅速？

我试图在我的页面上放置一个视频，它必须始终响应16:9。我发现了很多例子，它们基本上是相同的，在底部应用56.25%的填充。但是，只要我对iframe应用了max height和max width，因为我不希望它填充整个页面，下面的内容就会因为填充而开始移动

---

有没有办法阻止它这样做？最大宽度为1000px，最大高度为563px16:9。

因此，我最后在容器中放置了一个透明图像。然后我将此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;
}

---

自己看：

所以我最后做的是在容器中放置一个透明图像。然后我将此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;
}

---

你自己看看：

这就是你想要的吗，我只是把所有这些都包装在一个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>

---

这就是你要找的，我只是把所有这些都包装在一个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>

---

你有没有试过调整窗口的大小？它溢出了窗口，甚至没有缩小。下面的文本突然消失并被隐藏。DIV-ception。我需要在他们周围再加一个DIV，让他们也在中间。时髦的不过很管用，谢谢！干杯很高兴我帮了你。你有试过调整窗口大小吗？它溢出了窗口，甚至没有缩小。下面的文本突然消失并被隐藏。DIV-ception。我需要在他们周围再加一个DIV，让他们也在中间。时髦的不过很管用，谢谢！干杯很高兴我帮了你。当你增加宽度尺寸时，文本向左移动。@Leon是的，因为视频居中？当你增加宽度尺寸时，文本向左移动。@Leon是的，因为视频居中？