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

Question

例如我有一个链接

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

对于 youtube 视频缩略图：

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

是否可以使用 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不必写 aseperate 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

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

在网上搜索了一段时间以解决此问题后，我一无所获，我想我已经尝试了一切，但没有解决我的问题。然后在我的逻辑驱动下，我只是将嵌入式 youtube 视频的 iframe 包装在一个 div 集溢出：隐藏；到这个 div 并使其高度比 iframe 高度小 2px（在我的视频中，底部有黑色边框）。所以包装器 div 比 iframe 小，并且通过将其定位在视频上，您可以隐藏您不想要的黑色边框。我认为这是迄今为止我尝试过的所有方法中最好的解决方案。

在下面的这个例子中，尝试只嵌入 iframe，你会在底部看到小的黑色边框，当你将 iframe 包裹在 div 中时，边框消失了，因为 div 与 iframe 重叠并且它比视频小，而且它has 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>

在我的情况下，边框的高度约为 2px，因此我将包装器 div 的高度缩小了 2px 以隐藏边框，在您的场景中，如果边框位于视频的顶部或侧面和/或具有不同的尺寸，您必须为包装器 div 制作不同的尺寸并将其定位好，以便它与边框所在的视频重叠并且溢出：隐藏；边界是隐藏的。

希望这会有所帮助。

Answer 6

优酷是怎么做到的。图片网址中有很多参数。

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