去除YouTube缩略图上4:3黑边

Question

例如，我有一个链接

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

对于一个YouTube视频缩略图：

我想要移除上下的黑色边框，使得图片变成这样：

是否可以使用PHP函数、javascript/jQuery或者YouTube API本身来实现？

- Derfder

---

设置 CSS 图像高度.... - Eugen

使用PHP，您可以像这样裁剪图像并去除黑色边框。 - machineaddict

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”将不可用。因此，不要依赖它。

- TheCarver

---

视频所有者的配置中是否有设置来提供此版本？当我尝试使用目标视频ID访问此URL时，返回404错误。其他尺寸可以正常工作。 - Neil Monroe

@NeilMonroe，说得好。不太确定有哪些设置。这是我在我们自己的视频中使用的图像位置，这些视频质量很高，从未失败过，可以生成此图像。我猜如果视频的质量不足以产生1500px x 900px，则可能无法创建该图像。您可以创建一个回退程序，以便如果该图像不可用，则执行一些时髦的CSS来隐藏黑色条纹。 - TheCarver

我很喜欢解决方案像这样简单明了！感谢你的答案，它为我节省了大量时间，这些时间原本会用于编写包装器和相应的CSS样式。同时，其他回答/评论甚至没有提到在考虑响应式设计时它们将立即失效（不使用百分比）。 - aequalsb

这应该标记为正确答案，因为它更一般化，需要的工作更少。 - Ales

它不会起作用，如果边框在水平方向上...但我认为YouTube正在使用某种算法从垂直或水平方向上删除边框。 - Muhammad Asif

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;
}

- Rich Bradshaw

---

不确定这会成为一个问题吗？只需像<div style='background:url('blahblahblah') center no-repeat;'></div>这样在行内设置背景属性，而不是使用img标签。使用PHP进行裁剪是可能的，但比使用CSS更繁琐。请记住，PHP需要从互联网获取图像，将其解压缩到RAM中，进行裁剪，压缩它，然后保存到磁盘中。 - Rich Bradshaw

好的，如果没有其他解决方案，我会使用你的回答。不过，我会等待其他答案几分钟。 - Derfder

我不是内联CSS的粉丝，但正如我所写的，我会再等一下，如果没有更好的解决方案出现，我会使用你的解决方案。 - Derfder

另一个解决方案是为图像设置负的顶部和底部边距，并在图像容器上设置 overflow: hidden。类似于此示例：http://dabblet.com/gist/4012647 - Ana

你可以使用background-size，但更好的方法是像Ana上面建议的那样做。 - Rich Bradshaw

Answer 3

如果您希望它具有灵活的宽度，请使用以下内容：

HTML

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

CSS

->

CSS

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

- Sergi Ramón

---

这对于我的使用情况非常适用，可以处理可变和响应式视频宽度。 - Nick Rice

在我看来，这是最好的答案。很高兴我往下滚动了一下。 - kefet

为什么你使用了10%？ - Michal - wereda-net

Answer 4

To remove the black borders from the Youtube thumbnail, no separate code or CSS is needed. Simply use the ytimg.com site, which stands for YouTube image, to fetch the images such as thumbnails and icons from YouTube that come from that domain.

Example shown below -

Original Image [With borders]

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

- Pranav Bilurkar

---

这是一个重要的区别，没有明确记录。 - user115014

hqdefault不是原始图像，maxresdefault是，但这个图像大小并不总是可用的，还有介于maxres和hq之间的sddefault。 - regularjoe

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

- Gino

---

在这个语境中，"sigh=Gv-oyTIgA39e7UG01pZ2RiGbwSo"表示什么？ - Pranav Bilurkar

Answer 6

我需要一种响应式的方法来完成它，因此让我们考虑这段代码正在运行中：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`;

- Ido

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>

- Sampath Kumar

Answer 8

这是我为类似问题提供的答案，它会完全解决你的问题。只需使用html和css从包装器div中剪切不想显示的内容即可。

在网上搜索了一段时间，但没有找到解决此问题的方法。我认为我已经尝试过所有可能性，但仍然无法解决我的问题。然后，在我的逻辑驱使下，我只是将嵌入式youtube视频的iframe包裹在一个div中，并设置overflow: hidden；将该div的高度设置比iframe高度小2像素（我的视频底部有黑色边框）。 因此，包装器div比iframe小，并将其定位在视频上方，您可以隐藏不想要的黑色边框。 我认为这是我迄今为止尝试过的最佳解决方案。

从以下示例中尝试仅嵌入iframe，您将看到底部有小黑边框。当您将iframe包装在div中时，边框将消失，因为div重叠在iframe上且小于视频，而且它具有overflow: hidden，因此超出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>

在我的情况下，边框高度约为2像素，因此我将包装器div的高度减小2像素以隐藏边框。在您的情况下，如果边框位于视频的顶部或侧面，并且/或具有不同的尺寸，则必须为包装器div制作不同的尺寸，并将其定位好，使其重叠在边框所在的视频上，并使用overflow:hidden;隐藏边框。

希望这能帮到您。

- dekiss