Loading...

Blog

How to Automatically Retrieve Video Thumbnails from YouTube

We often use YouTube ID’s in our projects to grab either videos or thumbnails directly from YouTube, giving us greater flexibility as well as simplifying the process for the end user. In this tutorial we will teach you how to use the YouTube ID to retrieve all of the different available video thumbnails automatically from YouTube.

Use the YouTube Video ID to Retrieve the Video Thumbnails

Every YouTube video has a unique ID associated with it; utilizing this ID we can easily retrieve any of the available video thumbnails automatically from YouTube. We have listed and explained all of the different available YouTube video thumbnail options below, simply find the one that best suits your needs and insert your video’s YouTube ID.

Each YouTube video has 4 different generated thumbnails sized at 120×90:

<img src="http://img.youtube.com/vi/<youtube-video-id-here>/default.jpg" alt="YouTube" />
<img src="http://img.youtube.com/vi/<youtube-video-id-here>/1.jpg" alt="YouTube" />
<img src="http://img.youtube.com/vi/<youtube-video-id-here>/2.jpg" alt="YouTube" />
<img src="http://img.youtube.com/vi/<youtube-video-id-here>/3.jpg" alt="YouTube" />

The Default Thumbnail has Multiple Options Available

A large version sized at 480×360:

<img src="http://img.youtube.com/vi/<youtube-video-id-here>/0.jpg" alt="YouTube" />

A high quality version sized at 480×360:

<img src="http://img.youtube.com/vi/<youtube-video-id-here>/hqdefault.jpg" alt="YouTube" />

A medium quality version sized at 320×180:

<img src="http://img.youtube.com/vi/<youtube-video-id-here>/mqdefault.jpg" alt="YouTube" />

A standard definition version sized at 640×480:

<img src="http://img.youtube.com/vi/<youtube-video-id-here>/sddefault.jpg" alt="YouTube" />

A maximum resolution version (size varies):

<img src="http://img.youtube.com/vi/<youtube-video-id-here>/maxresdefault.jpg" alt="YouTube" />

What about HTTPS?
Not to worry, all of the above urls are also available over https.

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

Leave a Comment

2 comments
Brad Dalton
Brad Dalton

Thanks for the very useful tip.


When i tested the HTML, it pulls in a high quality image but the image includes the black border. 


Any tips on how to remove it or pull in an image without the black border?