Dynamic YouTube Image Thumbnails

Album Cover: The Future

"The maestro says it's Mozart, but it sounds like bubble gum."
Leonard Cohen / Waiting For The Miracle

Posted on May 13, 2007 12:09 PM in Web Development

Warning: This blog entry was written two or more years ago. Therefore, it may contain broken links, out-dated or misleading content, or information that is just plain wrong. Please read on with caution.

I implemented a new feature over at my Jenny McCarthy and Hayden Panettiere websites this past week.

I've been posting YouTube videos on both sites for quite some time, but have only been providing text descriptions to go along with the links from the main video pages. I finally decided that I wanted to figure out how to dynamically include thumbnail image previews of the clips, not only to display on the main video pages, but also in web feeds where applicable.

First I got all fancy and was sending in YouTube API requests to get at the information. The youtube.videos.get_details function provides thumbnail information in its <thumbnail_url> node.

However, once I had implemented a preliminary approach using that method, I quickly realized there was a very obvious pattern to the thumbnail URLs being returned with each call:

http://img.youtube.com/vi/LiIboq6XCOg/2.jpg

The only portion of the above URL that seems to change is the video ID between the fourth and fifth forward slashes.

So rather than calling the API multiple times to get thumbnails for all the videos presented on the page, I decided to keep all function calls local, opting to create my own internal function for extracting the YouTube video ID from my XHTML-compliant embed code using a regular expression and then inserting that between the http://img.youtube.com/vi/ and /2.jpg portions of the static thumbnail URL.

The result is much faster and works like a charm.

Comments

Saikrishna on May 21, 2007 at 11:07 AM:

Thanks a ton. You saved lot of my time :)

joshkaufman on August 08, 2007 at 9:36 PM:

hello,

I find this post to be very interesting. I am currently using a "related videos" based off a wordpress "related posts" plugin, but that doesn't help me get thumbnails for the related videos. Any suggestions on how I can combine your tips to implement my solution?

Bernie Zimmermann on August 08, 2007 at 11:16 PM:

Josh, as long as you can somehow extract the video ID from the related videos, you should be able to employ this trick at your site. I'm not sure how much direct access you have to the plugin, though.

Leon Zandman on August 21, 2007 at 7:31 AM:

I'm pretty sure this trick didn't work a few months ago. I had to use the API because the thumbnails were located on various differently named servers and you couldn't predict the URL. Seems they have simplified things by using a generic URL for their thumbnails, just like they do for videos.

Bernie Zimmermann on August 21, 2007 at 11:18 AM:

Thanks for the history, Leon. I'm hoping they stick with this new generic URL because hitting the API every time you need to fetch a video's thumbnail feels like overkill to me.

David on August 30, 2007 at 7:04 AM:

Thanks for writing that URL. I wanted to have a collection of videos on my personal homepage and thought about creating my own thumbnails to link to each video! This URL has just saved me a lot of time.

Adam Khan on December 18, 2007 at 5:36 AM:

Perfect, just was I was looking for. Thanks for the legwork and posting the results.

Ketchman on January 20, 2008 at 12:06 PM:

Wow you are awesome, two of my issues I found the answers to on your website. BTW I agree with so many others that your design/colors are really the best I've seen. Even your font choice goes great with the site.

Keep up the good work my friend.

Bernie Zimmermann on January 20, 2008 at 10:22 PM:

Thanks for the kind words, Ketchman, and thanks for dropping by.

varun on January 31, 2008 at 5:52 AM:

hi guys.

i would really appreciate if you can tell me how to make a out a thumbnail of a youtube video...if possible please give me the full code.i need it...

ialexs on February 08, 2008 at 1:47 AM:

report... 8 feb 2008, the url works.. :)
yes, using youtube's API kinda overkill if just want to get a thumbnail of one or two video ...

thanks, Sir... :)

Nikk Folts on February 19, 2008 at 8:24 AM:

Saved me tons of time! Thanks. Hopefully YouTube doesn't change this anytime soon.

Tyrone on February 27, 2008 at 9:48 AM:

Is it okay to link directly to youtube's thumbnails images? Is it allowed?

I've been working for RPTV for some time and its been difficult creating thumbnails for each new video that comes in. Each video is hosted in youtube. We have about 70 videos... so thats a lot of thumbnails.

I wonder if there's a way to make our site automatically load latest videos and thumbnails on to our page. Hopefully youtube / google is okay with that?

Work Site
http://www.regentpark.tv

My Site
http://teabone.awardspace.com

STUNNAMAN on April 02, 2008 at 1:47 PM:

this is exactly what i was looking for
fuck the api
thanks

jong on May 15, 2008 at 8:03 PM:

its not working anymore =(

brilliantul on June 04, 2008 at 4:58 AM:

brilliant :) thanks

Edog on June 20, 2008 at 9:54 AM:

great post. thanks.

Me on August 04, 2008 at 7:57 PM:

Man, I love you! Thanks a ton :)

Vangou on August 12, 2008 at 6:07 AM:

Nice ! Very light compared with the YouTube API.
I hope this will work in the future (since it is undocumented).
By security, when embeeding the video into my (home-made) CMS, the thumbnail is copied to my server.

Chuck Norris Dude on August 15, 2008 at 5:09 AM:

Good catch.

They're now using http://i1.ytimg.com/vi/LiIboq6XCOg/2.jpg and http://i1.ytimg.com/vi/LiIboq6XCOg/default.jpg on the site itself, but your solution still works.

loige on September 19, 2008 at 2:59 AM:

Great post and really great solution ;)

Donpa on September 23, 2008 at 4:35 AM:

Thanks mate, your my saviour!

d3vlabs on November 02, 2008 at 1:39 PM:

http://img.youtube.com/vi/VIDEO-ID/0.jpg

will get u a 320x240 thumbanil

sb on November 04, 2008 at 4:04 AM:

Thanks!

matthew fedak on November 07, 2008 at 3:33 AM:

At last my prayers answered so simple too bernie soooo simple indeed. all that messing around with ffmpeg and php ffmpeg scripts to get thumbnails and long php cron jobs, what a load of wasted time. can just link to youtube and get thumbnail like so. dare i sa again...SIMPLE!

Thanx bernie

Danillo Nunes on November 12, 2008 at 11:26 AM:

Nice, but what is the Regex are you using for this solution?

Costin on December 02, 2008 at 6:17 PM:

Thanks for the article! I have spread the word on my blog too :)

William Nelson on February 08, 2009 at 10:12 AM:

Am I missing something or does the newer gdata api not support getting thumbnail image urls? This is a big pain. Also it suggests that the simple fixes above will be broken regularly, if google in fact doesn't want people getting thumbnails.

jQuery Howto on February 12, 2009 at 5:56 AM:

Great article,

There is a javascript function implemented code posted here.

Sriram on March 04, 2009 at 4:15 PM:

thanks man, you saved my time :)

Astralis on March 16, 2009 at 9:30 PM:

Thanks for sharing! This saved me loads of time! I was about to go the API route too.

Cosa on March 24, 2009 at 4:08 PM:

It's good to know an easy way to get youtube video thumbnails. It can be helpful for my new php scripts

justin on May 06, 2009 at 5:51 PM:

Thanks!

Sarak on May 14, 2009 at 10:54 PM:

Please can anyone provide me the Source code to create
Dynamic YouTube Image Thumbnails

renef on May 27, 2009 at 12:54 AM:

thank you very much!it saves my time a lot

Matze on July 13, 2009 at 9:44 AM:

better quality for all videos using: http://img.youtube.com/vi/VIDEO_ID/hqdefault.jpg

jabran on July 28, 2009 at 4:23 AM:

love you man!!!!

name on July 29, 2009 at 9:03 PM:

What is it,

psymon on September 02, 2009 at 9:28 AM:

http://i1.ytimg.com/vi/VIDEO_ID/hq1.jpg
http://i1.ytimg.com/vi/VIDEO_ID/hq2.jpg
http://i1.ytimg.com/vi/VIDEO_ID/hq3.jpg

Also work too :)

Rob on September 14, 2009 at 10:50 AM:

Very helpful post - thank you. You just saved me days worth of work. Cheers.

Denis on October 07, 2009 at 5:19 PM:

Bernie.
You've just save me from writing my own thumbnail extractor. Thank you!

Nuno Pinto on October 14, 2009 at 3:42 PM:

How can i had a Youtube video thumbnail to a excerpts list using this technique ? Could someone help me with this?

best

Theta on November 08, 2009 at 8:08 PM:

Thank you - saved me heaps of time!

Omar on December 15, 2009 at 1:24 AM:

Thanks!

http://i3.ytimg.com/vi/video_id/default.jpg - Small
http://i3.ytimg.com/vi/video_id/0.jpg - Large
http://i3.ytimg.com/vi/video_id/1.jpg - Cap 1
http://i3.ytimg.com/vi/video_id/2.jpg - Cap 2
http://i3.ytimg.com/vi/video_id/3.jpg - Cap 3

june on January 01, 2010 at 12:41 AM:

thx for ur post
I m trying to insert youtube thumbnails into vdo theme
I hope i can get it done

veplcsk on January 29, 2010 at 2:02 AM:

I was wondering... if your tag was XHTML-compliant, why use regular expressions?

You could have used XML parser.

I am guessing it would have been way easier to use an XML parser than a regular expression.

veplcsk on January 29, 2010 at 2:03 AM:

Oops!

I meant your " < embed > " tag.. the website turned it into an actual embedded element! :D

Bernie Zimmermann on February 01, 2010 at 10:57 PM:

veplcsk, the regular expression wasn't used against the actual embed tag and its contents. It was used against a URL to extract the ID portion.

Sunit Waingankar on March 31, 2010 at 5:49 AM:

Thats was a great trick. Saved lot of development time for me. Thanx.

Asheville Web Developer on April 21, 2010 at 5:38 PM:

Heya,
Thanks for this tip. Do you know if there's any difference between using the
http://img.youtube.com/vi/jbSsoqdefOA/2.jpg
or the
http://i2.ytimg.com/vi/jbSsoqdefOA/2.jpg
method?

Any signs that one would be more reliable (less likely to stop working) than another?

Thanks again!

Gary

Prashant on April 29, 2010 at 12:27 AM:

That was one life-saver dude! It works

Jimbo on May 04, 2010 at 4:25 AM:

top marks many thanks saved me some serious leg work!

Elad on August 14, 2010 at 12:31 AM:

Works great - many thanks!

am on August 23, 2010 at 9:32 AM:

good tip, saved me some time!

Ross on September 26, 2010 at 12:09 PM:

I've just been doing a lot of research on the YouTube API the past couple of days and this is what I've come up with so far:

@gary, (based on a lot of assumption) I think the img.youtube.com serves more as a kind of CDN, so that address will fetch an image according the best source. If you notice you can access the same thumbnail from the following different URLs

http://i1.ytimg.com/vi/jbSsoqdefOA/2.jpg
http://i2.ytimg.com/vi/jbSsoqdefOA/2.jpg
http://i3.ytimg.com/vi/jbSsoqdefOA/2.jpg
http://i4.ytimg.com/vi/jbSsoqdefOA/2.jpg

In addition to the above post you can now get a hq image:

http://img.youtube.com/vi/jbSsoqdefOA/hqdefault.jpg

Ross

nivanka on October 09, 2010 at 7:36 PM:

this is great, simple and pretty straight forward.

thanks for sharing.

Mike on November 02, 2010 at 9:57 PM:

Thanks dude. You ROCK

Beeg Tube on November 09, 2010 at 3:16 PM:

amazing, it still works after ~3 years :D

Anthony on November 25, 2010 at 10:06 PM:

Dude you rock....it works...thanks.

Chiranjit Nath on December 24, 2010 at 6:02 AM:

I have no ward to say you . You have done a miracle.Great work....

Khoa Nguyen on January 27, 2011 at 1:13 AM:

Thanks for your tip. It's help me a lot.

Donato - Marketisoft.com on January 28, 2011 at 12:25 AM:

Does anybody know how to have on the thumbnail the big "Play" button and the control bar on the bottom (including time of the video)?

Andres Solenzal Omchina on February 25, 2011 at 2:10 PM:

Thanks bro for this info. Is very helpfull to have people like you around us.

Stonedeft on March 02, 2011 at 9:46 PM:

I suck at regular expression can you paste in a sample code please

mauri on April 12, 2011 at 1:13 AM:

Im trying to design a youtube gallery for wordpress and this is very useful news.

Thanks for share this info.

Colin on May 25, 2011 at 9:02 PM:

I'm never giving comments/feedback to great scripts and tricks but this is brilliant.

Richard on August 07, 2011 at 7:54 AM:

I need a code to get youtube thumbnail as by any keywords I search. Could please advice me about the code?

shohan on September 15, 2011 at 9:34 AM:

Thanks dear. i was searching like this easy tricks. Thanks tons :)

rishi on October 11, 2011 at 2:04 AM:

The thumbnails works great !!! thnx .. help me save some time....

Harsh on January 18, 2012 at 8:56 AM:

Hi, I have an issue.

If I use the youtube source code

http://img.youtube.com/vi/%VIDEO_ID%/0.jpg
in my source code for an youtube player which I am trying to develop, I get a Thumbnail error:2036

But If I use any other like
http://i1.ytimg.com/vi/LiIboq6XCOg/2.jpg
or any other source code, My player works perfectly.
Any help will be appreciated.
I am stuck on this since ages!!

Pr�fung on January 20, 2012 at 12:44 PM:

It doesn't matter that the content is outdated... i found what i was looking for! Thanks!

Post Comments

If you feel like commenting on the above item, use the form below. Your email address will be used for personal contact reasons only, and will not be shown on this website.