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

2022-01-06 00:00:00 youtube thumbnails jquery php

我可以通过此处描述的链接轻松获取 Youtube 图像缩略图:如何从 YouTube API 获取 YouTube 视频缩略图?

I can easily get a Youtube image thumbnail with the links described here: How do I get a YouTube video thumbnail from the YouTube API?

但所有这些缩略图都是 3:4 格式(或类似格式),即使视频本身是其他格式.然后在图片的顶部和底部可以看到一些黑色的水平条.

But all these thumbnails are in 3:4 format (or something close) even though the video itself is in some other format. Then some black horizontal bars are just visible at the top and bottom of the picture.

我需要一个没有黑条的 9:16 格式(这是我的视频格式)的图像.可以恢复吗?

I need an image in 9:16 format (which is my video format) without black bars. Is that possible to retreive?

更新

即使 Youtube 页面上的视频没有黑条,Youtube 视频本身似乎也在顶部和底部有黑条.

It appears that also the Youtube video itself has black bars in top and bottom even though there are no black bars on the video on the Youtube page.

有什么方法可以以正确的格式简单地显示缩略图和视频?

Any ways to simply show both thumbnail as well as video in correct format?

更新

我发现了这个:在 youtube 缩略图上以 4:3 的比例去除黑色边框

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

The asker wants to remove the black top and bottom bars. The best answers here are to adjust the height and "hide" the black bars by manual correction. Some of the comments here below also suggest that.
Does this mean that it's not possible to avoid?

推荐答案

根据API 文档:

yt:name 属性值为 mqdefault 的标记标识 320x180 (16:9) 缩略图.此图像也没有时间戳,可能来自视频中的任何一点.

The tag that has a yt:name attribute value of mqdefault identifies a 320x180 (16:9) thumbnail image. This image does also does not have a timestamp and could be from any point in the video.

因此,有一个图像适用于 16:9 格式的每种视频分辨率(至少我已经测试过).当然,这不是地球上最大的图像...

So there's an image that's available for every video resolution (that I've tested, at least) that is in 16:9 format. Of course, it isn't the biggest image on the planet...

如果尺寸有问题,并且您需要更大的东西,那么最好的选择实际上是选择一个总是比例为 4:3 的可用选项,并使用CSS.YouTube 自己已经这样做了很长时间.他们现在在他们的网站上使用多种缩略图尺寸,包括 mqdefault.jpg.

If the size is an issue, and you require something bigger, than the best option really is to choose one of the available options that is always in 4:3 ratio, and hide the excess using CSS. YouTube itself has done this for a long time. They utilize multiple thumbnail sizes across their site now, including mqdefault.jpg.

当所有尺寸都已知时,从图像中隐藏多余的宽度和/或高度真的很容易.以下示例使用来自 YouTube 的 4:3 图像,其中隐藏了黑条,结果为 16:9.对 CSS 进行了评论,供您欣赏.

It's really easy to hide excess width and/or height from an image when all the dimensions are known. Here is an example using a 4:3 image from YouTube with the black bars hidden, leaving a 16:9 result. The CSS is commented for your enjoyment.

相关文章