javascript - CSS - 具有相同比例的变换不适用于具有相同纵横比的视频

Question

我使用 css 属性:

transform:scale(1.35);

删除 YouTube 视频上的黑条。它适用于几乎所有视频，但也有一些异常(exception)。我知道这是由纵横比引起的。这些视频的宽高比均为 16:9:

https://www.youtube.com/watch?v=2vMH8lITTCE

https://www.youtube.com/watch?v=ALZHF5UqnU4

但为什么我不能为它们设置相同的比例呢？此比例仅适用于第二个。

附言:使用 YT API 获取 YouTube 上上述视频的纵横比:

var player = document.getElementById('movie_player');
player.getVideoAspectRatio();//==> 1.7777 for both.

设置变换是视频的比例:使用 inspect 元素指向 video 标签，并为 video 标签添加以下 css:

transform:scale(1.35);

在这种情况下，去除黑条的最佳方法是什么？我不能把这个值设置得太高，因为会丢失一部分视频。我想知道的最重要的事情是，为什么这个值 (1.35) 不能很好地用于第一个。我测试了很多情况，它适用于所有宽高比(16:9、21:9)的视频。

Answer 1

其中一个视频必须编码有黑条。很难分析视频并检测到这一点，因此您要么必须接受它，选择一个没有条形图的不同版本的视频，要么手动输入视频的“真实”纵横比。