blocks|key|2630989|text|根据API文档：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2630990|具有mqdefault+:name属性值的标记标识一个320x180+(16:9)缩略图。此图像也没有时间戳，可能来自视频中的任何一点。|blockquote|2630991|因此，每一个视频分辨率(至少我已经测试过)都有一个16:9格式的图像。当然，这不是地球上最大的图像..。|2630992|如果大小是一个问题，而且您需要更大的东西，那么最好的选择实际上是选择一个总是以4:3比例的可用选项，并使用CSS隐藏多余的选项。YouTube自己已经做了很长时间了。他们现在在他们的网站上使用多个缩略图大小，包括mqdefault.jpg。|style|CODE|2630993|当所有尺寸都已知时，很容易将多余的宽度和/或高度隐藏在图像中。下面是一个使用来自YouTube的4:3图像的示例的黑条隐藏，留下16:9的结果。CSS是为您的享受而评论的。|2630994|entityMap|0|LINK|mutability|MUTABLE|url|https://developers.google.com/youtube/2.0/reference#youtube_data_api_tag_media:thumbnail|1|https://groups.google.com/d/msg/youtube-api-gdata/ICRyWebsY7w/q-LnkSzRz18J|2|http://cssdesk.com/f7aXD^0|0|8|0|0|0|0|2Y|D|1S|I|1|0|V|P|2|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|F|7|14|8|@]|9|@]|C|$]]|$1|G|3|H|5|6|7|15|8|@]|9|@]|C|$]]|$1|I|3|J|5|6|7|16|8|@$A|17|B|18|K|L]]|9|@$A|19|B|1A|1|1B]]|C|$]]|$1|M|3|N|5|6|7|1C|8|@]|9|@$A|1D|B|1E|1|1F]]|C|$]]|$1|O|3|-4|5|6|7|1G|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]|W|$5|R|S|T|C|$U|X]]|Y|$5|R|S|T|C|$U|Z]]]]

<a href="https://developers.google.com/youtube/2.0/reference#youtube_data_api_tag_media:thumbnail" rel="noreferrer">Per the API documentation:</a>

<blockquote>
 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.
</blockquote>

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...

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. <a href="https://groups.google.com/d/msg/youtube-api-gdata/ICRyWebsY7w/q-LnkSzRz18J" rel="noreferrer">YouTube itself has done this for a long time</a>. They utilize multiple thumbnail sizes across their site now, including <code>mqdefault.jpg</code>.

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

blocks|key|2631030|text|YouTube提供的图像没有4:3比例的黑色条带。要获得16:9没有黑色条带的视频缩略图，请尝试其中之一：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2631031|http://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg|code-block|syntax|javascript|2631032|第一个mqdefault是320x180像素图像。|offset|length|style|CODE|2631033|第二个maxresdefault是1500x900像素的图像，因此它需要调整大小才能用作缩略图。这是一个很好的图像，但它并不总是可用的。如果视频质量很低(我想象不到720+p，不太确定)，那么这个'maxresdefault‘就变得不可用了。所以永远不要依赖它。|2631034|entityMap^0|0|0|3|9|0|3|D|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@$I|W|J|X|K|L]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

YouTube offers images that don't have the 4:3 ratio black strips. To get a 16:9 video thumbnail with no black strips, try one of these:

<pre><code>http://img.youtube.com/vi/&lt;insert-youtube-video-id-here&gt;/mqdefault.jpg
http://img.youtube.com/vi/&lt;insert-youtube-video-id-here&gt;/maxresdefault.jpg
</code></pre>

The first one <code>mqdefault</code> comes as a 320x180 pixel image.

The second one <code>maxresdefault</code> comes as a 1500x900 pixel image, so it would need resizing to use as a thumbnail. This is a nice image but it isn't always available. If the video is of a low quality (less than 720p I'd imagine, not exactly sure) then this 'maxresdefault' becomes unavailable. So never rely on it.

blocks|key|1841854|text|在网上搜索了一段时间来解决这个问题后，我什么都没想出来，我想我什么都试过了，问题也没有得到解决。然后，在我的逻辑驱动下，我把嵌入的youtube视频的iframe封装在一个div集合溢出中:隐藏；到这个div，使它的高度比iframe高小2px+(在我的视频中，底部有黑色边框)。所以包装工具div比iframe小，并且在视频上定位，你可以隐藏你不想要的黑色边框。我认为这是我迄今尝试过的最好的解决办法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1841855|从下面的示例中，尝试只嵌入iframe，您将在底部看到小的黑色边框，当您将iframe包在div中时，边框就消失了，因为div与iframe重叠，并且它比视频小，并且它有溢出:隐藏，因此所有超出div维度的内容都被隐藏。|1841856|<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>|code-block|syntax|javascript|1841857|在我的例子中，边框的高度约为2px，因此我使包装器div2PX的高度更小，以隐藏边框，在您的场景中，如果边框位于视频的顶部或边框上和/或具有不同的维度，您必须为包装div设置不同的维度，并将其正确定位，这样它就可以与边界所在的视频重叠，并与溢出重叠:隐藏；边框是隐藏的。|1841858|希望这能帮上忙。|1841859|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

After searching the net a while for fix of this issue I came up with nothing, I think I have tried everything and nothing solved my problem. Then driven by my logic I just wrapped the iframe of the embedded youtube video in one div set overflow: hidden; to this div and made it's height 2px smaller then the iframe height (on my video there was black border in the bottom).
So the wrapper div is smaller then the iframe and with positioning it over the video you can hide the black borders you don't want.
I think that this is the best solution from everything I have tried so far.

From this example below try embedding just the iframe and you will see small black border at the bottom, and when you wrap the iframe in the div the border is gone, because the div is overlapping the iframe and it's smaller then the video, and it has overflow: hidden so everything that goes out of the div dimensions is hidden.

<pre><code>&lt;div id="video_cont" style="width: 560px;
 height: 313px;
 overflow: hidden;"&gt;


 &lt;iframe id="the-video" class="extplayer" width="560" height="315" src="https://www.youtube.com/embed/EErx017kDHQ?&amp;amp;autoplay=0&amp;amp;rel=0&amp;amp;fs=0&amp;amp;showinfo=0&amp;amp;controls=0&amp;amp;hd=1&amp;amp;wmode=transparent&amp;amp;version=2;yt:quality=high;" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;

&lt;/div&gt;
</code></pre>

In my case the border was with about 2px height so I made the wrapper div 2px smaller in height to hide the border, in your scenario if the border is on the top of the video or on the sides and/or with different dimensions, you have to make different dimensions for the wrapper div and position it good so it overlaps the video where the borders are and with overflow:hidden; the borders are hidden.

Hope this will help.

I can easily get a Youtube image thumbnail with the links described here: <a href="https://stackoverflow.com/questions/2068344/how-to-get-thumbnail-of-youtube-video-link-using-youtube-api">How do I get a YouTube video thumbnail from the YouTube API?</a>

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.

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

Update

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?

Update

I found this: <a href="https://stackoverflow.com/questions/13220715/removing-black-borders-43-on-youtube-thumbnails">Removing black borders 4:3 on youtube thumbnails</a>

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?

Show Youtube video and thumbnail in correct 9:16 format

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我可以很容易地获得Youtube图片的缩略图，上面描述的链接如下：但所有这些缩略图都是3:4格式(或一些接近)，即使视频本身是以其他格式。然后在图片的顶部和底部可以看到一些黑色的水平条。我需要一个9:16格式的图像(这是我的视频格式)，没有黑条。这有可能撤退吗？更新看起来Youtube视频本身在顶部和底部都有黑条，尽管...

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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