css - 从嵌入的 YouTube 视频的任一侧移除黑条

Question

我在这个网页上嵌入了一个 YouTube 视频。

我想删除单击播放时出现的两个黑条。

在此处查看屏幕截图：

我在 Stack Overflow 上进行了搜索，发现最接近的是这个，但没有帮助：

如何从 YouTube 视频中删除黑条

所以我尝试使用以下 CSS 调整视频：

  html5-video-container {
      background-position: center;
      background-repeat: no-repeat;
      width: 100%;
      height: 100%;
      left: 0px;
      top: 0px;
      position: absolute;  
    }

    video.video-stream.html5-main-video {
      background-position: center;
      background-repeat: no-repeat;
      width: 100%;
      height: 100%;
      left: 0px;
      top: 0px;
      position: absolute;
    }

起初我只是尝试调整视频，然后我也尝试调整视频容器元素，但都没有成功。

任何CSS大师可以帮助我吗？

我希望视频与单击播放之前出现的缩略图大小相同。

提前致谢。

Answer 1

这似乎是 YouTube 框架而不是 css 的问题。

YouTube 框架与页面一样宽，但与实际视频一样高。这意味着会有很多额外的空间，它必须用一些东西来填充它！

只要 YouTube 框架比实际视频宽，就会有黑色空间。您需要使 YouTube 帧的纵横比与实际视频相匹配。