css - 响应式 iframe，全宽，但设置高度

Question

我试图让我的 YouTube 嵌入式视频占屏幕的 100% 宽度 like can be seen here但在视频的一侧可以看到边缘之间没有黑色空间。这是由于我将 max-height 设置为 600px 造成的。

.

我可以让视频响应，我想在上面设置一个 max-height 这样当屏幕很大时它不会占据整个屏幕，而是只是一个响应式的部分，但与我在上面显示的网站上保持相同的高度。

Please see jsfiddle here .如果您调整 jsfiddle 的大小并使其尽可能大，您会看到它延伸到屏幕末端下方。我想防止这种情况发生，但又不想在视频和 iframe 边框之间创建黑色空间。通过在 iframe 上设置 max-width，我想避免出现这个黑色空间。

我希望没有混淆，但如果有，请告诉我，我可以提供更多详细信息。我可以看到 iframe 属性在我作为示例提供的页面中不断变化，但看不到发生这种情况的位置。

#home-video {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
}

#home-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.main-image {
  width: 100%;
  background: url(http://ichef.bbci.co.uk/news/976/cpsprodpb/10E0E/production/_88043196_bret_hart_1920x1080.jpg) center center no-repeat;
  background-size: cover;
  height: 100%;
}

<div class="main-image">

</div>

<section id="home-video">
  <iframe id="video " src="https://www.youtube.com/embed/QP5_n5UmbHc "></iframe>
</section>

Answer 1

您提供的页面使用此 plugin以达到这种效果。

该插件允许您以与您提供的页面相同的方式将视频设置为一种背景图像。

希望对您有所帮助。