Question

我使用css属性：

transform:scale(1.35);

删除YouTube视频上的黑条。它适用于几乎所有视频，但也有一些例外。我知道这是由纵横比引起的。我对这些视频的宽高比为16：9：

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

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

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

P / S：使用YT API在YouTube上获取上述视频的宽高比：

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

设置转换是视频的比例：使用inspect元素指向视频标记，并为视频标记添加以下css：

transform:scale(1.35);

在这种情况下，删除黑条的最佳方法是什么？我无法将此值设置得如此之高，因为视频的一部分将会丢失。我想知道的最重要的事情，为什么这个值（1.35）不能很好地适用于第一个。我测试了很多情况，它适用于所有宽高比（16：9,21：9）的视频。

Answer 1

其中一个视频必须在其中编码黑条。分析视频并检测到这一点非常困难，因此您必须接受它，选择不同条形的视频的不同版本，或输入视频“真实”视频。纵横比。

Answer 2

var $allVideos = $("iframe[src*='//player.vimeo.com'], iframe[src*='//www.youtube.com'], object, embed"),
$fluidEl = $("figure");
$allVideos.each(function() {    
  $(this)
    // jQuery .data does not work on object/embed elements
    .attr('data-aspectRatio', this.height / this.width)
    .removeAttr('height')
    .removeAttr('width');   
}); 

$(window).resize(function() {      
  $allVideos.each(function() {    
    var $el = $(this);
    var newWidth = $el.parents('figure').width();
    $el
        .width(newWidth)
        .height(newWidth * $el.attr('data-aspectRatio'));     
  });   
}).resize();

回到那里this repository帮助了我很多这个问题

CSS - 具有相同缩放比例的变换对于具有相同宽高比的视频不起作用

2 个答案: