Use a YouTube video thumbnail image in your HTML

Today I was working on a project where I wanted to create links to about 20 different YouTube videos. I wanted to use thumbnails images for each video and didn’t really want to create those images myself … because I’m lazy.

I figured YouTube has already created all those thumbnail images for me so why should I create them again? There must be a way to just grab them from YouTube right? Well there is and it’s super easy.

Adding the following URL into your img tag will display the default thumbnail image for the video:

http://img.youtube.com/vi/Video_ID/default.jpg

Just replace “Video_ID” with the actual id of your video and you are all set. You have some flexibility with which thumbnail you display as well.

Here are some examples using Trale Lewous’ Butterfingers Commercial:

http://img.youtube.com/vi/Zp-PX13ZlX8/default.jpg

http://img.youtube.com/vi/Zp-PX13ZlX8/1.jpg

http://img.youtube.com/vi/Zp-PX13ZlX8/2.jpg

http://img.youtube.com/vi/Zp-PX13ZlX8/3.jpg

http://img.youtube.com/vi/Zp-PX13ZlX8/0.jpg

If you are using jQuery there is also a super simple way to pull these in on the jQuery HowTo Blog.