如何从youtube预览图像中删除黑色边框(不同图像黑色边框长度)

Question

我已经完成了以下链接

->删除youtube缩略图上的黑色边框4:3

->如何删除Youtube图像的黑色边框

->https://stackoverflow.com/questions/13220715/removing-black-borders-43-on-youtube-thumbnails#:~：text=到%20删除%20黑色%20边框，该边框%20来自%20该%20域。

我们的项目中有许多不同大小(宽度和高度(的视频。

尝试了以下解决方案

解决方案1：裁剪或调整高度

HTML
<div class="thumb">
<img src="...">
</div>

CSS

.thumb {
overflow: hidden;
}
.thumb img {
margin: -10% 0;
width: 100%;
}            
Failing for some sceanrios , because of image black border size is varying for few images.
Screenshot for reference

黑色边框较少的图像具有更多黑边框的图像

解决方案2：将其用作背景图像，居中并更改高度。

.youtubePreview {
background:url('http://img.youtube.com/vi/aOPGepdbfpo/0.jpg') center no-repeat;
height:204px;
width:480px;
}

or

also tried with background-image

<div class="bgimg" style="background-image: url(&quot;https://img.youtube.com/vi/8yxZ-k0xI9s/0.jpg&quot;); height:275px "></div>

Example: 450*275 failing       

We have video with different sizes so it works for some width and its failing for other widths. 

解决方案3：获取没有黑色边框的Youtube图像(使用mqdefault.jpg而不是0.jpg(

关注此链接如何从YouTube API获取YouTube视频缩略图？

基于上面的链接才知道mqdefault.jpg图像没有黑边框

We using url for images https://img.youtube.com/vi/YOUTUBEVIDEOID/0.jpg 

so replaced with      https://img.youtube.com/vi/YOUTUBEVIDEOID/mqdefault.jpg


But unfortunately few mqdefault images having black borders at left and right side.''

mqdefault图像

1. 许多不同大小(高度和宽度(的视频
2. 预览图像黑色边框长度也有所不同

有人能告诉我们如何实现这一点吗？

提前感谢

Answer 1

以下是我改编的一些例子(通过检查嵌入视频并查看其CSS样式(：

示例#1:

.ytp-cued-thumbnail-overlay-image {
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
position: absolute;
}

<p>Image 1: </p>
<div class="ytp-cued-thumbnail-overlay-image" style="background-image: url('https://i.ytimg.com/vi/3TJgmUGFHqw/sddefault.jpg');"></div>

示例2:

.ytp-cued-thumbnail-overlay-image {
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
position: absolute;
}

<p>Image 2: </p>
<div class="ytp-cued-thumbnail-overlay-image" style="background-image: url('https://i.ytimg.com/vi/NNgYId7b4j0/maxresdefault.jpg');"></div>