YouTube Video Thumbnails in JavaScript

Input YouTube Video URL to get thumbnail images:

Youtube hosts youtube video thumbnail images on various domains. 
Below are the three domains of them.

YouTube domains:


All the above domains will return same image, only the difference is in domain name.

1. YouTube generates total 9 (7 + 2) thumbnail images.
2. 7 thumbnails for all the videos and 2 extra thumbnails only for video of higher resolution.
3. YouTube contains three different thumbnails.
4. Rest thumbnails are same as default thumbnail but resolutions are different.

You can find the youtube id from the URL as following:
YouTube Video URL Example:
Above highlighted with yellow color is the ID of YouTube video.

YouTube Thumbnail Images:
Player Background Thumbnail (480x360 pixels)

Start Thumbnail Resolution 120x90 pixels

Middle Thumbnail (120x90 pixels)

End Thumbnail Resolution 120x90 pixels

Normal Quality Thumbnail Resolution 120x90 pixels

Medium Quality Thumbnail Resolution 320x180 pixels

High Quality Thumbnail Resolution 480x360 pixels

Standard Definition Thumbnail Resolution 640x480 pixels

Two extra thumbnails exist only for High Quality videos.
Maximum Resolution Thumbnail Resolution 1920x1080 pixels
Name Resolution Size (In Pixel) Black Bars
0 High 480 X 360 Yes
1 Low 120 X 90 Yes
2 Low 120 X 90 Yes
3 Low 120 X 90 Yes
default Low 120 X 90 Yes
mqdefault Medium 320 X 180 No
hqdefault High 480 X 360 Yes
sddefault High 640 X 480 Yes
maxresdefault This resolution only available for videos of higher
resolutions. So may be available or not.
1280 X 720 or Higher No

Note: Black bars are black background on the top and the bottom of the YouTube thumbnail image.

Hi! I am Sartaj Husain. I am a Professional Software Developer, live in Delhi. I write blogs in my free time. I love to learn and share the knowledge with others because it is no good to try to stop knowledge from going forward. So free posts and tutorials. more..

No comments