html - 根据容器大小缩放vimeo视频并去除黑条

Question

我想删除已嵌入的 vimeo 视频中出现的黑条。我正在分享代码的链接。 JSFiddle Link

<div class="embed-container">
<iframe src="https://player.vimeo.com/video/86019637?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff&amp;autoplay=1" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

iframe{
宽度:570px；
高度:250px；
}

左右各有2条黑条。我们想删除黑条。你能帮忙做些什么来删除它吗？我们应该保持纵横比。请对我放轻松，我不是技术人员。谢谢。

Answer 1

使用 height 和 width vh 就像

.embed-container {
  width: 570px;
  height: 250px;
}

iframe {
  width: 100%;
  height: 100vh;
}

视频有一个宽高比，它会保持这就是为什么视频看起来像，当你全屏播放时，条形会消失。