How to give any youtube video a thumbnail of your choice

by John McGeechan

overview

Anyone who has loaded up a video on youtube had faced the frustration of being forced to use a choice of one of 3 random images. Youtube seems to have a maniacal obsession with not allowing users to specify their own chosen thumbnail for a video - there may be a good reason for this btw, I just don't know what that reason is. You can specify the thumbnail if you are a youtube partner, but as of the publication of this article (2013-07-18) it certainly isn't the case for a regular youtube account.

Background​

There have been a few attempts in the past to game the youtube api, usually by one or other hacks to achieve the desired goal. The problem is that youtube usually closes the loophole as soon as it gets to hear about them. For instance it used to be that the three thumbnails available to you were the first, last and middle frame of your movie, some people exploited that by sticking in there desired image at the appropriate point in the movie, youtube appear to have responded by making that algorithm choose random frames instead (don't quote me on this). Anyways, i decided to come up with a solution that does not rely on the largesse or otherwise of youtube.

Solution

nb this solution requires jquery

ok, first thing to state, this is not a perfect solution. It's simply a slight of hand to get over this limitation and it may not be to your taste. The good thing about it though is that it can be implemented without and youtube restrictions, current or future. Ok so let's crack on...

First thing, lets look at an example video on the internet, here's a dull and dry tutorial I created for the staff at a local charity...




ok. it's dull. v. dull. A really nice thumbnail might spice things up. How about this one ?



Note that it's about the same size as the movie dimensions, this is advised but not essential. ok so the next step is to embed the following html into your page...

<script type="text/javascript">

jQuery(document).ready(function() {

  var videoWidth = 560;
  var videoHeight = 315;
  var videoSrc = 'http://www.youtube.com/embed/pWxpofV4UF0';
  var substituteImage = 'http://simpleritsolutions.com/sites/default/files/fastCar.jpg';
  var imageElementId = '#picHolder';


  $(imageElementId).html('<a href="/" id="picLaunch" style="border-bottom-style: none;" title="Click to see video"><img src="' 
  + substituteImage + '" /></a>').after('<div id="videoHolder"></div>');

  $('#picLaunch').click(function() {

    "use strict";

    jQuery("#videoHolder").html('<iframe style="float: left;" width="' + videoWidth + '" height="' + videoHeight     + '" src="' 
    + videoSrc + '?wmode=opaque&autoplay=1" frameborder="0" allowfullscreen></iframe>');

    $('#picLaunch').hide();
    return false;

  });     


});



</script>

<div id="picHolder"></div>

Which gives us the following...

 

Let's break that code down...

    
    jQuery(document).ready(function() {

This ensures that the code is run once the page is loaded. note this requires the jquery library

    
    var videoWidth = 560;
    var videoHeight = 315;
    var videoSrc = 'http://www.youtube.com/embed/pWxpofV4UF0';
    var substituteImage = 'http://simpleritsolutions.com/sites/default/files/fastCar.jpg';
    var imageElementId = '#picHolder';

This defines the image and video you want to use as well as the width and height and the div that will hold the initial image (nb ensure that you specify the id selector '#').


   $(imageElementId).html('<a href="/" id="picLaunch" style="border-bottom-style: none;" title="Click to see video"><img src="'
      + substituteImage + '" /></a>').after('<div id="videoHolder"></div>');

This adds the image to the target element as well as an extra div "videoHolder" which will hold the the new video


    $('#picLaunch').click(function() {

      "use strict";

      jQuery("#videoHolder").html('<iframe style="float: left;" width="' + videoWidth + '" height="' + videoHeight     +       '" src="'
      + videoSrc + '?wmode=opaque&autoplay=1" frameborder="0" allowfullscreen></iframe>');

      $('#picLaunch').hide();
      return false;

    });

This is the clever bit. Using jquery we add a click function to the new image that we just created. When that image is clicked we add a youtube iframe to the new videoHolder div we created - ensuring that autoplay is set to true - and we then hide the image, note we must return 'false' to the onclick handler to prevent any other logic from firing.

As a final flourish and to make it clear to the users that they need to click to see the video, i usually overlay a video play icon over the image...
 

 

Post new comment

By submitting this form, you accept the Mollom privacy policy.