Display YouTube Thumbnails Easy with jQuery

Sam Deering

You may not know but youTube takes screenshots of the videos you upload, there are usually 2 main images (one big thumbnail and 1 small thumbnail). Here is how you can display YouTube Video thumbs on your webpage.

YouTube URLs

The urls are in this format (the v param is what we need):

YouTube Thumbs

Big Thumb



Small Thumb (start)



Small Thumb (after a minute or so of duration)




// Returns big screenshot by video id

// Returns small thumbnail by YouTube video URL
$.jYoutube('http://www.youtube.com/watch?v=rSUfWXcNAOw', 'small');

jQuery Code

  jYoutube: function( 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";

Try it yourself

<title>jYoutube - jQuery YouTube plugin demo</title>
<script src="jquery.js"></script>
<script src="jyoutube.js"></script>

<script type="text/javascript">
    // Get youtube video thumbnail on user click
    var url = '';
        // Check for empty input field
        if($('#url').val() != ''){
            // Get youtube video's thumbnail url
            // using jYoutube jQuery plugin
            url = $.jYoutube($('#url').val());
            // Now append this image to <div id="thumbs">
            $('#thumbs').append($('<img src="'+url+'" />'));


<div class="left">
<h1>Submit YouTube link</h1>
  <input type="text" name="url" id="url"/>
  <input type='button' value="Get Thumbnail" id="submit"/>

<p>Your YouTube video thumbs:</p>
<div id="thumbs"> </div>



Free JavaScript: Novice to Ninja Sample

Get a free 32-page chapter of JavaScript: Novice to Ninja and receive updates on exclusive offers from SitePoint.