响应iframe，全宽，但设置高度

Question

我正在尝试使我的youtube嵌入式视频100％宽度的屏幕like can be seen here但边缘之间没有黑色空间，可以在视频侧面看到。这是因为我设置max-height 600px。

。

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

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

我希望没有混淆，但如果有，请告诉我，我可以提供更多细节。我可以看到iframe属性在我提供的页面中不断变化，但是无法看到这种情况发生在哪里。

＆＃13;

＆＃13;

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

＆＃13;

<div class="main-image">

</div>

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您提供的页面使用此plugin来实现此效果。

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

希望它有所帮助。