响应式 iframe，全宽，但设置高度答案

【问题标题】：responsive iframe, full width, but set height响应式 iframe，全宽，但设置高度
【发布时间】：2017-01-28 05:04:19
【问题描述】：

我正在尝试使我的 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>

【问题讨论】：

标签： css iframe responsive-design sass

【解决方案1】：

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

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

希望对你有帮助。

【讨论】：