2011

Getting Video thumbnails from YouTube

Posted By : Shaun McCran
Related Categories: Coldfusion

I want to display an image thumbnail on a page, so that a user can click on it and the video will pop up in a lightbox. But how do I get a thumbnail image of the video I want? This article shows you how you can quickly and easily use a Youtube URL to get video thumbnails.

There is a demo of this here: http://www.mccran.co.uk/examples/youtube-thumbs/

Youtube has an API you can use to pull down data on a video, including several thumbnail images, if you don't want to get your head around that they also have a URL you can use.

view plain print about

1http://img.youtube.com/vi/ video id /#.jpg
2use 1,2,3 for thumbs
3use 0 for a large image

You can use the URL above along with the video ID from the 'embed' code on Youtube and either 1,2,3 (replace the #) to get a thumbnail image. The thumbnails seem to be roughly from the start, middle and end based on the number.

I have put together a small CFC that accepts a video id and returns a structure of thumbnail URL's.

view plain print about

1<cffunction name="get" access="public" output="false" returntype="struct" hint="I get the url paths for the you tube video sent in">
2
3<cfargument name="videoId"
4    type="string"
5    required="true"
6    hint="Video id to use">
7
8<cfset var youTubeUrl = "http://img.youtube.com/vi/">
9<cfset var thumbData = structNew()>
10
11<cfset thumbData['thumb1'] = youTubeUrl & arguments.videoId & "/1.jpg">
12<cfset thumbData['thumb2'] = youTubeUrl & arguments.videoId & "/2.jpg">
13<cfset thumbData['thumb3'] = youTubeUrl & arguments.videoId & "/3.jpg">
14
15<cfset thumbData['thumbWidth'] = "120">
16<cfset thumbData['thumbHeight'] = "90">
17
18<cfset thumbData['full'] = youTubeUrl & arguments.videoId & "/0.jpg">
19
20<cfset thumbData['fullWidth'] = "480">
21<cfset thumbData['fullHeight'] = "360">
22
23        <cfreturn thumbData>
24    </cffunction>

There is a demo of this here: http://www.mccran.co.uk/examples/youtube-thumbs/

Maybe for a next version I may add cfhttp calls to download the images and store them locally.

Comments (11) |

Send |

del.icio.us |

Digg It! |

Linking Blogs |

Answer Questions

TweetBacks

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)

[Add Comment] [Subscribe to Comments]

Would you like to contribute this to the youtube CFC project i have over on RIAForge?

# Posted By Raymond Camden | 28/03/2011 23:10

Hi Ray, Yes that would be good, if you think it fits.

Its this one? http://youtubecfc.riaforge.org/

# Posted By Shaun McCran | 28/03/2011 23:15

Yep - if you want to download/add/send to me I'll double check/SVN it in/be done with it. ;)

# Posted By Raymond Camden | 28/03/2011 23:18

Here's a lesser known trick - Append 'hq' before the number and you'll get the HD image.

So, I'd refactor and have a size argument ('small' or 'large') passed in and then return the appropriate 120x90 or 480x360 thumbnail image.

Note: default.jpg/0.jpg gets the sd/hd default image (not hd0.jpg)

# Posted By Aaron | 30/03/2011 04:19

Hi Aaron,

Good tips! Thanks!

I wasn't aware of the HD versions, I'll have a tinker with it and see what the difference in image quality is.

# Posted By Shaun McCran | 30/03/2011 08:47

I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often..

# Posted By visit this website | 14/12/2015 02:44

It was very useful for me. I m happy I found this blog. Thank you for sharing with us,I too always learn something new from your post..

# Posted By Assistant Certified | 22/12/2015 02:01

I'm able to bookmark your site and show the kids check out up here generally. I m fairly positive there likely to be informed a great deal of new stuff here than anyone....

# Posted By targeted traffic | 06/01/2016 00:47

I m fairly positive there likely to be informed a great deal of new stuff here than anyone....

# Posted By jaipur to ajmer taxi | 09/01/2016 23:39

I got so many video thumbnails from youtube page with API. That's working good and thanks to everyone for sharing http://dissertation-writing-services-online.blogsp... code reviews on this blog. Every article we are using to improve the code activity.

# Posted By saekieK5 | 12/01/2016 22:39

Thanks for your work. Sharks have always been a subject of interest for me, so I really appreciate the effort you put into this piece!

# Posted By Los Angeles County DUI Attorney | 20/01/2016 03:05

[Add Comment]

Shaun Mccran

Getting Video thumbnails from YouTube