Question

E.g。我有一个链接

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

用于YouTube视频缩略图：

enter image description here

我想删除黑色的顶部和底部边框，以便我得到这样的图片：

enter image description here

可以使用PHP函数javascript / jQuery或者youtube api本身吗？

Answer 1

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是一个320x180像素的图像。

第二个maxresdefault是一个1500x900像素的图像，因此需要调整大小才能用作缩略图。这是一个很好的图像，但它并不总是可用。如果视频质量低（我想象的不到720p，不完全确定），那么'maxresdefault'就会变得不可用。所以永远不要依赖它。

Answer 2

将其用作背景图像，居中并改变高度。

http://dabblet.com/gist/4012604

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

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的{{1}}网站，YouTube image fetches来自YouTube的图片，如thumbnails和icons所需的网站来自该领域。

示例如下所示 -

原始图片 [有边框]

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

没有边框/条带

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

OR

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

Answer 5

youtube如何做到这一点。图片网址中有很多参数。

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

这是我给出的类似问题的答案，但它会完全解决你的问题，只需用包装div来剪切你不希望从视频中显示的所有内容，这是用html和css完成的。

在网上搜索了一段时间以解决这个问题之后，我什么都没想出来，我想我已经尝试了一切，没有解决我的问题。然后由我的逻辑驱动我只是将嵌入的youtube视频的iframe包装在一个div set overflow：hidden;到这个div并使它的高度比iframe高度小2px（在我的视频中底部有黑色边框）。所以包装器div比iframe小，并且将它放在视频上，你可以隐藏你不想要的黑色边框。我认为这是迄今为止我尝试过的所有内容的最佳解决方案。

从下面的示例中尝试仅嵌入iframe，您将在底部看到小的黑色边框，当您在div中包装iframe时，边框消失了，因为div与iframe重叠并且它比视频小，它有溢出：隐藏所以超出div维度的所有东西都是隐藏的。

<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设置不同的尺寸并将其定位好，以便它与边框所在的视频重叠并与overflow：hidden;边界是隐藏的。

希望这会有所帮助。

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>

Answer 8

我需要一种响应式的方式来做这件事，所以让我们考虑一下这段代码运行在 window.addEventListener("resize");

我们基本上是想把 4:3 的比例转换成 16:9

<div id="video-item">
    <img src="https://i.ytimg.com/vi/{videoId}/hqdefault.jpg" />
</div>

const videoItem = document.getElementById("video-item");
const img = videoItem.querySelector("img");

resize()
{
    img.style.top = `${-(img.offsetHeight - (img.offsetWidth * 9 / 16)) / 2}px`;
    videoItem.style.height = `${9 / 16 * videoItem.offsetWidth}px`;
}

#video-item
{
    position: relative;
    overflow: hidden;
}

#video-item img
{
    width: 100%;
    position: absolute;
}

顺便说一句，您还可以回退到图像的计算高度（以防图像未完全加载）

img.style.top = `${-((img.offsetHeight || (3 / 4 * img.offsetWidth)) - (img.offsetWidth * 9 / 16)) / 2}px`;

在youtube缩略图上删除黑色边框4：3

8 个答案: