Question

我可以使用此处描述的链接轻松获取Youtube图片缩略图：How do I get a YouTube video thumbnail from the YouTube API?

但是所有这些缩略图都采用3：4格式（或接近的格式），即使视频本身采用其他格式。然后在图片的顶部和底部可以看到一些黑色水平条。

我需要9:16格式的图像（这是我的视频格式），没有黑条。这可能会有所改变吗？

更新

即使Youtube页面上的视频中没有黑条，Youtube视频本身也会在顶部和底部显示黑条。

是否可以简单地以正确的格式显示缩略图和视频？

更新

我发现了这个：Removing black borders 4:3 on youtube thumbnails

提问者想要移除黑色的顶部和底部条。这里最好的答案是调整高度并通过手动校正“隐藏”黑条。下面的一些评论也表明了这一点这是否意味着无法避免？

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

Per the API documentation:

具有yt：name属性值mqdefault的标记标识320x180（16：9）缩略图图像。此图片也没有时间戳，可以来自视频中的任何一点。

所以有一个图像可用于16：9格式的每个视频分辨率（至少我测试过）。当然，它不是地球上最大的形象......

如果尺寸有问题，并且您需要更大的尺寸，那么最好的选择实际上是选择总是的4：3比例的可用选项之一，并隐藏多余的选项CSS。 YouTube itself has done this for a long time。他们现在在其网站上使用多个缩略图尺寸，包括mqdefault.jpg。

当所有尺寸都已知时，很容易从图像中隐藏多余的宽度和/或高度。 Here is an example using a 4:3 image from YouTube隐藏黑条，留下16：9的结果。 CSS被评论为您的乐趣。

Answer 3

在网上搜索了一段时间以解决这个问题之后，我什么都没想出来，我想我已经尝试了一切，没有解决我的问题。然后由我的逻辑驱动我只是将嵌入的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;边界是隐藏的。

希望这会有所帮助。

以正确的9:16格式显示Youtube视频和缩略图

3 个答案: