Question

我试图嵌入YouTube视频，并在此处找到了一些关于如何实现这一目标的答案，但是当我嵌入视频时，我想为iframe添加500px的自定义高度。我们的想法是保持宽高比，但视频的iframe（可见区域）高度较小。我不介意如果顶部和底部被切断（不完全可见），只要高度为500px并且它保持全宽而视频两侧没有黑条。

这就是我所拥有但却不知道如何调整高度而不会出现黑条。

 <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='http://www.youtube.com/embed/QILiHiTD3uc' frameborder='0' allowfullscreen></iframe></div>

Answer 1

您可以通过更改padding-bottom值来调整容器的高度。但添加一个固定的高度最终会在某些时候出现黑条。

Answer 2

喜欢这个吗？

.embed-container {
  width: 500px;
  height: 375px;
  overflow: hidden;
  position: relative;
}
.mask {
  position: absolute;
  width: 500px;
  height: 50px;
  background-color: red;
  z-index: 1;
}
.top {
  top: 0;
}
.bottom {
  bottom: 0;
}

<div class='embed-container'>
  <div class="mask top"></div>
  <iframe width="500" height="375" src="https://www.youtube.com/embed/QILiHiTD3uc" frameborder="0" allowfullscreen></iframe>
  <div class="mask bottom"></div>
</div>

如何嵌入具有自定义高度的全屏响应式YouTube视频

2 个答案: