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

I'm trying to embed a YouTube video and have found a few answers here on how to accomplish that however, when I embed the video I would like to add a custom height of 500px to the iframe. The idea is to maintain the aspect ratio but the iframe (visible area) of the video is smaller in height. I don't mind if the top and bottom is cut off (not fully visible) so long as the height is 500px and it remains full width with no black bars on the sides of the video.

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

This is what I have but don't know how to tweak the height without black bar appearing.

这就是我所拥有但不知道如何在没有出现黑条的情况下调整高度。

 <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>

2 个解决方案

#1

You'd be able to tweak the height of the container by changing the padding-bottom value. But adding a fixed height will eventually show black bars at some point.

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

#2

Like this?

.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>