phpjqueryyoutubethumbnails

Show Youtube video and thumbnail in correct 9:16 format


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?


Solution

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