8

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?

Community
  • 1
  • 1
Steeven
  • 4,057
  • 8
  • 38
  • 68
  • One of the solutions, I can think of is to make thumbnails in the 9:16 format and upload it separately. Though it might be an impractical job. – tuxnani Mar 28 '13 at 14:44
  • Yes of course :) But not the most userfriendly way for a user adding his video. – Steeven Mar 28 '13 at 14:48
  • Can you think of resizing image to fit in the requirements? A separate imagecache kind of thing? – tuxnani Mar 28 '13 at 15:09
  • @tuxnani: I don't know what you mean by imagecache... But the image cannot just be resized. If I should go that way, then cropping would be needed. – Steeven Mar 28 '13 at 15:15
  • @Steeven You mention user friendly, are you making something for a multiple user site? A blog site? Can you be more specific about what you need to make, I can think of one or two ways to do this. – Adam Brown Mar 28 '13 at 17:06
  • @AdamBrown. A user pastes the URL for a youtube video in a text field and saves it to the database. From that URL I am retreiving the video ID. I then use this ID for a link like `http://img.youtube.com/vi//hqdefault.jpg` to show a start-image for the video. My point above is just that I don't want the user to create and upload a start-image. – Steeven Mar 30 '13 at 11:39
  • I mean it depends also how you want to show the image. You could do something like import it to your site and resize it using php. Or you could set it as the background of a Div and then force the Div to a certain size? – Adam Brown Mar 30 '13 at 11:53
  • This is probably easy for you but the kind of thing I'm thinking http://www.elated.com/articles/add-image-uploading-to-your-cms/ – Adam Brown Mar 30 '13 at 11:53
  • Well yes okay, but how can I know if there is a black bar or not? And will it always have the same height? I mean, the user can also upload youtube videos in a regular 3:4 format and maybe other youtube permitted formats, and in that case I don't think the images have those black bars. – Steeven Mar 30 '13 at 12:00
  • to make black bars disappear, you can use `margin` *just sayin' – gamehelp16 Mar 30 '13 at 13:59
  • Well yes, @gamehelp16... But please read the comment two comments up. – Steeven Mar 30 '13 at 14:12
  • It is possible. Check my answer. – TheCarver Sep 24 '13 at 01:37

4 Answers4

19

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.

TheCarver
  • 19,391
  • 25
  • 99
  • 149
  • 2
    As you mentioned maxres is not always available, it's also not `1500x900` but the maximum resolution of the video (it could be 1280x720, 1920x1080 and more)... – Adonis K. Kakoulidis Oct 21 '14 at 13:32
8

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.

Aken Roberts
  • 13,012
  • 3
  • 34
  • 40
1

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.

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

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.

dekiss
  • 105
  • 1
  • 3
  • This is the answer that I ended using to get rid of the stupid black line when using a custom thumbnail that mimics a png crop look. It's dated 2013 and there is nothing newer than this on Google anywhere but this works. – James F Aug 10 '15 at 07:09
0

Officially YouTube embed code dimensions for proper usage in websites is 560px wide and 315px high.

while, youtube thumbnail size you have to use should be 1280x720 pixels in dimension, It is the HD size of thumbnail officially used by YouTube, this size of thumbnail will help you to embed videos in 9:16 format and users will see your thumbnail properly and text will remain clear to viewers.

Bonus: you can also download youtube video thumbnails using the website below.

https://www.youtubethumbnaildownloaderonline.com/?id=5NevuA7AaVE

only replace the youtube video ID (5NevuA7AaVE) with the code after (=) sign and you can check out different youtube thumbnail sizes available of videos. it will help you better understand 9:16 and 3:4 thumbnail sizes. it will help users to read content of image and eventually conversion in video views.

Jaffar Khalid
  • 1
  • 1