real cool tv
How can you change the image that appears when you embed your YouTube video?

bad
10 second standard image can be anything and it's often horrible!
One of the commonest questions we receive is:
"I have my video and I am using YouTube to serve it as you suggested, but the image that shows on the video is of me pulling a funny face. What can I do now?"
This is not YouTube's fault. They use a frame from 10 seconds into the video as the "still" that represents it on YouTube. So what you might see is something like this one:

Which is just a random image rather than one that indicates what you want in your video.

There are several things that you can do:
  1. You can log into your YouTube account and choose a different image. There is a choice of three and on some occasions one of them will be ideal for your purposes.

  2. The second thing is to get exactly the image that you want and use that instead by setting us a bit of simple Java script. Which I will describe below.
If you watch your video and then stop it on a frame that contains an image you like you can use that frame image instead of the random one from YouTube and I will explain how.

Steps to setting up an image to "face" you YouTube video:
  1. Choosing you image.

    You can:

    • Select an image to use from your marketing collection. It needs to be the correct size for the video. You will have chosen the size of your video from the YouTube embed code and the image needs to match that. 

    • Use a screen capture program to grab the image you want and re-size it to the correct dimensions, dpi and file size. It should be fairly small in size i.e. about 10K. The best file type is jpg. You can also use any other logo or images.

    • Play the video and pause it on the screen you like and then capture it and crop it down to the correct size. On Windoze machines [ctrl] [Print Screen] will get the screen image into the clipboard for pasting into an edit program.  To get the image use "snip" on Windows 7 or some other cut and paste tool on other OSs.

  2. Add some simple js to your web page.

    3. Add the basic jquery library to your header (Google it if you don't know how). It's already on 30% of websites. Then put this jquery script in the header section of your page i.e. between <head> and </head>. Get the "iFrame" from teh embed section of YouTube and replace the iFrame in the example.

    Example js code - with a 720 x 440 video

    
<script language="javascript">
$(document).ready(function(){
$("#player").click(function(e)
e.preventDefault();
$("#player").html('<iframe width="720" height="440" src="http://www.youtube.com/embed/{YOUR_VIDEO_ID}?rel=0" frameborder="0" allowfullscreen></iframe>');
});
});
</script>


    If you read the script you will see that it is looking for a image called "player" to be clicked. It then inserts the YouTube iFrame instead of the image. Obviously you need to replace {YOUR_VIDEO_ID} with your real video ID. This will enable you to add an image and have it swap with the player when clicked. If you are a bit more advanced you can "unload" the player and put the image back once it has finished, but that's not really required.

  3. Make sure your image is both the right size and has the right ID. 

    Put the image an tags around the intended YouTube embed location. It must have the same ID as in the script - in this case player.

Example code - placing the image

 <div id="player">   
       <img src="/images/nameofyourimage.jpg" width="800" height="406" />
 </div>

When you click on the image the video will now replace it.

  • Sit back and enjoy - Example:



    If you have any questions see our contacts page and send us an email.
    		•