去除 youtube 缩略图上的黑色边框 4:3

Posted 2023-02-22

【中文标题】去除 youtube 缩略图上的黑色边框 4:3

【英文标题】：Removing black borders 4:3 on youtube thumbnails

【发布时间】：2012-10-24 14:47:34

【问题描述】：

例如我有链接

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

对于 youtube 视频缩略图：

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

是否可以使用 php 函数 javascript/jQuery 或 youtube api 本身来完成？

【问题讨论】：

设置css图片高度....

使用 PHP，您可以裁剪图像并去除黑色边框，例如 this。

【参考方案1】：

我需要一种响应式的方式来做这件事，所以让我们考虑一下这段代码在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)) / 2px`;
    videoItem.style.height = `$9 / 16 * videoItem.offsetWidthpx`;

#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)) / 2px`;

【参考方案2】：

我不是专家，我正在寻找一种解决方案来消除 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"   >
      </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"   >
       </a>
    </div>
  </div>  
</div>

【参考方案3】：

要从Youtube thumbnail 中删除black borders，我们不必编写seperate code 或CSS。只需使用ytimg.com 站点，它代表YouTube image，其中fetches 来自YouTube，如thumbnails 和icons 根据需要来自该域。

示例如下 -

原图 [带边框]

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

无边框/条纹

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

或

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

【讨论】：

这是一个没有明确记录的重要区别

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

【参考方案4】：

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

HTML

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

CSS

.thumb 
    overflow: hidden;

.thumb img 
    margin: -10% 0;
    width: 100%;

【讨论】：

这对我的可变和响应式视频宽度的用例非常有用。

这是我认为的最佳答案。很高兴我向下滚动。

你为什么使用 10%？

【参考方案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

【讨论】：

什么是 sigh=Gv-oyTIgA39e7UG01pZ2RiGbwSo 在这种情况下？

【参考方案6】：

这是我为类似问题提供的答案，但它会完全解决您的问题，只需使用包装器 div 从视频中删除您不想显示的所有内容，这是通过 html 和 css 完成的。

在网上搜索了一段时间以解决此问题后，我一无所获，我想我已经尝试了一切，但没有解决我的问题。然后在我的逻辑驱动下，我只是将嵌入式 youtube 视频的 iframe 包装在一个 div 集溢出：隐藏；到这个 div 并使其高度比 iframe 高度小 2px（在我的视频中，底部有黑色边框）。 所以包装器 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"   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 制作不同的尺寸并将其放置好，以便它与边框所在的视频重叠并且溢出：隐藏；边框被隐藏了。

希望这会有所帮助。

【参考方案7】：

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”将不可用。所以永远不要依赖它。

【讨论】：

视频所有者的配置中是否有提供此版本的设置？当我使用目标视频 ID 尝试此 URL 时，我得到 404。其他尺寸也可以。

@NeilMonroe，说得好。不太确定任何设置。这是我在我们自己的视频中使用的图像位置，它是高质量的，并且永远不会产生这个图像。我猜如果视频质量不足以产生 1500 像素 x 900 像素，则可能无法创建图像。您可以创建一个后备程序，因此如果该图像不可用，则使用一些时髦的 CSS 来隐藏黑条。

我喜欢这样简单的解决方案！谢谢你的回答——它为我节省了很多时间，这些时间本来会花在形成包装器和与之配套的 css 上——而且其他答案/cmets 甚至都没有提到一旦考虑响应式设计它们就会中断（不使用百分比）

这应该被标记为正确答案，因为它更通用并且需要更少的工作。

【参考方案8】：

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

http://dabblet.com/gist/4012604

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

【讨论】：

对我来说看起来一样...有什么变化？

我已经删除了 html/css 作为一种可能性，因为我有多个 youtube 图片，而不仅仅是一个。通过 javascript 附加东西会矫枉过正。没有任何 php 函数可以使用某种纵横比裁剪图像吗？

不确定这会是什么问题？只需像<div style='background:url('blahblahblah') center no-repeat;'></div> 那样设置内联背景属性，而不是使用img 标签。使用 PHP 进行裁剪是可能的，但比使用 CSS 开销更大。请记住，PHP 需要通过 Internet 获取图像，将其解压缩到 RAM，裁剪，压缩，然后保存到磁盘。

另一种解决方案是为图像设置负的顶部和底部边距，并在图像容器上设置overflow: hidden。像这样dabblet.com/gist/4012647

您可以使用背景尺寸，但更好的方法是按照上面 Ana 的建议进行操作。