Thursday, February 12, 2009

How to get a YouTube video screenshot image (thumbnail) URL using JavaScript

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.

29 comments:

  1. This is a very useful tip and code, thank you very much for sharing!

    ReplyDelete
  2. Can you elaborate a little more on how the script would look on a html page?

    ReplyDelete
  3. > Can you elaborate a little more on how the script would look on a html page?

    The function returns a URL to the thumbnail and you can place, size, basically do whatever you want with that.

    ReplyDelete
  4. how do i find this javascript file on WP.
    I 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?

    ReplyDelete
  5. i want to know where the code should put.

    I 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

    ReplyDelete
  6. where should i put this code on wp blog?

    ReplyDelete
  7. @Arif, @Miocarbon, @Bytei

    You 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...

    ReplyDelete
  8. I need to do something similar for my blog,
    www.bestvideos4u.com

    Can you plz mail me here,
    admin@joomlahackers.net

    I would be waiting for your reply..

    ReplyDelete
  9. @Lord_Daksh, it's better if you contact me.

    Follow me on Twitter http://twitter.com/jqueryhowto and send direct message there...

    ReplyDelete
  10. i took your code and added some stuff, so its like a working example
    tx so much its a very great piece of code very cool

    http://www.gagarigs.com/site/getting-youtube-video-screenshot/

    ReplyDelete
  11. I released jQuery plugin that can be found here:

    http://plugins.jquery.com/project/jyoutube

    ReplyDelete
  12. thank u sir. this is very useful information.

    ReplyDelete
  13. Where do i put this function code thing? do i type it into youtube somewhere? or in the address bar?

    ReplyDelete
  14. am not getting a thumbnail view explain clearly please.. am a beginner

    ReplyDelete
  15. How can I use this script in the ASP.NET 3.5 silverlight 3.

    Reply me as soon as possible.

    ReplyDelete
  16. Thank you for this little code, I've used it in my blog here: http://aiko-no-heya.exteen.com.

    Thank you again for sharing this.

    ReplyDelete
  17. 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 ^^;

    ReplyDelete
  18. Very useful. This will help our pages load much faster.

    ReplyDelete
  19. Hi 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 ?

    I 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

    ReplyDelete
  20. Excelente post. thanks!

    ReplyDelete
  21. I'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.

    Thanks.

    ReplyDelete
  22. Thank you again for sharing this.

    ReplyDelete
  23. I know I'm late to the party, but this may make things even easier...

    http://stackoverflow.com/questions/2068344/how-to-get-thumbnail-of-youtube-video-link-using-youtube-api

    ReplyDelete
  24. Same here..please dumb this down..wth do I do? I want a screenshot for a vid...

    ReplyDelete
  25. hello, I can't understand the java script thing, seems too difficult, don't know how to find the thumbnail html yet.

    is 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.

    ReplyDelete
  26. hello frnd,
    i use Ur image generate code but it does not dispaly it actual image which display on you tube

    ReplyDelete