删除黑色边框的4：3在YouTube上的缩略图(Removing black borders 4:3

例如，我有一个链接

http://img.youtube.com/vi/aOPGepdbfpo/0.jpg

对于YouTube视频缩略图：

我想取出黑色顶部和底部边框，所以我得到这样的画面：

难道使用PHP函数来完成的JavaScript / jQuery的或可能的YouTube API本身？

Answer 1:

使用它作为背景图片，居中并改变高度。

http://dabblet.com/gist/4012604

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

Answer 2:

YouTube提供不具有4：3的图像比黑条。 为了得到一个16：没有黑条9视频缩略图，请尝试以下之一：

http://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg

第一种mqdefault当属看见320×180像素的图像。

第二个maxresdefault来为1500x900像素的图像，所以需要调整为缩略图使用。 这是一个很好的形象，但它并不总是可用的。 如果视频是一个低质量的（小于720P我想像，不是很确定），那么这“maxresdefault”变得不可用。 因此不要指望它。

Answer 3:

如果你有一个灵活的宽度想要它，使用：

HTML

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

CSS

.thumb {
    overflow: hidden;
}
.thumb img {
    margin: -10% 0;
    width: 100%;
}

Answer 4:

要除去black borders从Youtube thumbnail ，我们不必为编写seperate code或CSS 。 使用时只需将ytimg.com网站，即表示YouTube image ，其fetches从图像中YouTube ，像thumbnails和icons的要求，其来自该域。

下面示出实施例-

原始图像 [随着边界]

http://img.youtube.com/vi/JQ7a_8psCn0/hqdefault.jpg

没有边界/条

1. http://img.youtube.com/vi/JQ7a_8psCn0/mqdefault.jpg

要么

2. http://i.ytimg.com/vi/JQ7a_8psCn0/mqdefault.jpg

Answer 5:

YouTube如何做到这一点。 还有很多参数在图像的URL。

https://i.ytimg.com/vi/XkOpbLBzPsY/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=Gv-oyTIgA39e7UG01pZ2RiGbwSo

Answer 6:

这就是我的回答给了类似的问题，但将彻底解决你的问题，只是，这是用HTML和CSS进行切断而从包装DIV视频中显示你不想要的一切。

搜索网一段时间这个问题的修复，我想出了什么之后，我想我已经尝试了一切，没有什么解决我的问题。 然后，通过我的逻辑驱动我只是包裹在一个DIV集溢出嵌入YouTube视频的IFRAME：隐藏; 到这个div并提出它的高度为2px较小，则iframe的高度（在我的视频出现了在底部黑色边框）。 因此，包装DIV越小则iframe和与它定位在视频上可以隐藏你不想黑色边框。 我认为这是一切到目前为止，我已经尝试了最佳的解决方案。

从这个例子如下尝试嵌入就在iframe，你会看到小黑色边框的底部，而当你包裹在div边框的iframe消失了，因为DIV是重叠的iframe，它的体积更小则视频，并具有溢出：隐藏起来，走出格尺寸的一切都是隐藏的。

<div id="video_cont" style="width: 560px;
                            height: 313px;
                            overflow: hidden;">


    <iframe id="the-video" class="extplayer" width="560" height="315" src="https://www.youtube.com/embed/EErx017kDHQ?&amp;autoplay=0&amp;rel=0&amp;fs=0&amp;showinfo=0&amp;controls=0&amp;hd=1&amp;wmode=transparent&amp;version=2;yt:quality=high;"   frameborder="0" allowfullscreen></iframe>

</div>

在我的情况下，边界约2px的高度，使我取得了高度的包装DIV的2px较小隐藏边框，在您的情况，如果边界上的视频的顶部或两侧和/或具有不同的尺寸，你必须使不同尺寸的包装的div和它定位好，使其重叠在边框和溢出视频：隐藏; 边界是隐藏的。

希望这会有所帮助。

Answer 7:

我不是专家，我一直在寻找一个解决方案来移除YouTube视频缩略图的黑网吧，发现了一些解决方案，但并没有为我工作。 入门我发现这个想出了解决方案进行试验。

https://jsfiddle.net/1fL2ubwy/

 .row, .col, [class*="col-"] { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } .row { background: #f8f9fa; margin-top: 20px; } .col { border: solid 1px #6c757d; padding: 10px; } .yt-thumb { width: 100%; height: 74%; overflow: hidden; } .yt-thumb > img { margin: -10% 0; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap-theme.min.css"> <div class="container"> <div class="row"> <div class="col-md-6 col-sm-6 col-6 card vd-block mb-3"> <a class="yt-thumb" href="https://www.youtube.com/embed/wb49-oV0F78" data-rel="lightcase"> <img class="aligncenter" src="https://img.youtube.com/vi/wb49-oV0F78/hqdefault.jpg" alt="thumbnail" width="100%" height="auto"> </a> </div> <div class="col-md-6 col-sm-6 col-6 card vd-block mb-3"> <a href="https://www.youtube.com/embed/wb49-oV0F78" data-rel="lightcase"> <img class="aligncenter" src="https://img.youtube.com/vi/wb49-oV0F78/hqdefault.jpg" alt="thumbnail" width="100%" height="auto"> </a> </div> </div> </div> 

文章来源: Removing black borders 4:3 on youtube thumbnails