YouTube is a great video service by Google. As with any other product Google makes it easy to use its content on your own site. You can embed a YouTube video on your own site or query YouTube API (if you have a developer key). But what if you don't want to embed a flash video player and you only need an image of the video. The following function returns a YouTube video's thumbnail URL. Nothing more, nothing less.
Update: Now available as jQuery YouTube plugin – jYouTube.
The javascript function:
function getScreen( url, size ) { if(url === null){ return ""; } size = (size === null) ? "big" : size; var vid; var results; results = url.match("[\\?&]v=([^&#]*)"); vid = ( results === null ) ? url : results[1]; if(size == "small"){ return "http://img.youtube.com/vi/"+vid+"/2.jpg"; }else { return "http://img.youtube.com/vi/"+vid+"/0.jpg"; } }
You can pass a YouTube video URL or video id and the function will return a path to the video image. The second function argument is optional. You can specify the size of returned image. It can be big
(320x240) or small
(128x96), defaults to big
.
Here is an example usage:
imgUrl_big = getScreen("uVLQhRiEXZs"); imgUrl_small = getScreen("uVLQhRiEXZs", 'small');
See the plugin in action on jQuery YouTube demo page.
This is a very useful tip and code, thank you very much for sharing!
ReplyDeleteCan you elaborate a little more on how the script would look on a html page?
ReplyDelete> Can you elaborate a little more on how the script would look on a html page?
ReplyDeleteThe function returns a URL to the thumbnail and you can place, size, basically do whatever you want with that.
how do i find this javascript file on WP.
ReplyDeleteI use wp youtube video plugin that post video automatically to blog.
Is this file can be used on that plugin or do we have to edit it manually?
i want to know where the code should put.
ReplyDeleteI use WP videotube plugin which pull video from you tube and post it into wp blog.
but the problem is that i can get thumbnail post onto blog.
Can you help to solve this
where should i put this code on wp blog?
ReplyDelete@Arif, @Miocarbon, @Bytei
ReplyDeleteYou should first add the function declaration into your javascript file and then put get the image url and create an image using javascript.
I will create a jQuery plugin to do this...
I need to do something similar for my blog,
ReplyDeletewww.bestvideos4u.com
Can you plz mail me here,
admin@joomlahackers.net
I would be waiting for your reply..
@Lord_Daksh, it's better if you contact me.
ReplyDeleteFollow me on Twitter http://twitter.com/jqueryhowto and send direct message there...
i took your code and added some stuff, so its like a working example
ReplyDeletetx so much its a very great piece of code very cool
http://www.gagarigs.com/site/getting-youtube-video-screenshot/
I released jQuery plugin that can be found here:
ReplyDeletehttp://plugins.jquery.com/project/jyoutube
thank u sir. this is very useful information.
ReplyDeleteWhere do i put this function code thing? do i type it into youtube somewhere? or in the address bar?
ReplyDeleteam not getting a thumbnail view explain clearly please.. am a beginner
ReplyDeletegood...
ReplyDeleteHow can i use it
ReplyDeleteHow can I use this script in the ASP.NET 3.5 silverlight 3.
ReplyDeleteReply me as soon as possible.
Nice one :)
ReplyDeleteThank you for this little code, I've used it in my blog here: http://aiko-no-heya.exteen.com.
ReplyDeleteThank you again for sharing this.
I'm sorry, can you dumb this down a little for me? I need to get a screenshot from a vid, but I don't understand how. I'm sorry if I'm wasting your time ^^;
ReplyDeleteVery useful. This will help our pages load much faster.
ReplyDeleteHi there , this script is very nice, and works fine on very browser. I wish to ask you something if its possible: what about implementing vimeo thumbnail catcher in this script ?
ReplyDeleteI 0ve read about different ways to make it like parsing the XML related file or using a Json string.
I would be really grateful because im not a jq programmer and your post helped me a lot.
I have seen something about it on http://stackoverflow.com/questions/1361149/get-img-thumbnails-from-vimeo
Best wishes
joy
Excelente post. thanks!
ReplyDeleteI'm planning on using this for a personal project, so I was wondering if you were the author so that I can give proper credits.
ReplyDeleteThanks.
Thank you again for sharing this.
ReplyDeleteI know I'm late to the party, but this may make things even easier...
ReplyDeletehttp://stackoverflow.com/questions/2068344/how-to-get-thumbnail-of-youtube-video-link-using-youtube-api
Same here..please dumb this down..wth do I do? I want a screenshot for a vid...
ReplyDeletehello, I can't understand the java script thing, seems too difficult, don't know how to find the thumbnail html yet.
ReplyDeleteis there a format I can use?
for example, youtube video can always in the format of , like
"http://www.youtube.com/watch?v=...... "
so can I simply change the video code in the format then get the thumbnail html?
Or did you try several videos thumbnail html, and find something similar in the htmls? Then do you think there can be a format that allow me to simply change the video code part, then save as a new html as another thumbnail ?
Sorry, don't know whether you understood what I said.
hello frnd,
ReplyDeletei use Ur image generate code but it does not dispaly it actual image which display on you tube