如何从 youtube 预览图像中删除黑色边框（不同的图像黑色边框长度）

Question

我已经浏览了以下链接

->Removing black borders 4:3 on youtube thumbnails

->How to remove black border of Youtube image

->https://stackoverflow.com/questions/13220715/removing-black-borders-43-on-youtube-thumbnails#:~:text=To%20remove%20the%20black%20borders,which%20come%20from%20that%20domain.

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

尝试了以下解决方案

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

         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

Image with less black border Image with more black border

解决方案 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）

关注此链接How do I get a YouTube video thumbnail from the YouTube API?

根据上面的链接得知 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 image

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>