Show Youtube video and thumbnail in correct 9:16 format

Question

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?

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: Removing black borders 4:3 on youtube thumbnails

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?

Answer 1

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:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg

The first one mqdefault comes as a 320x180 pixel image.

The second one maxresdefault 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.

Answer 2

Per the API documentation:

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.

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. YouTube itself has done this for a long time. They utilize multiple thumbnail sizes across their site now, including mqdefault.jpg.

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.