14 May 2012

Change the YouTube Embed Image to Custom Image

How to YouTube, Ninja Tricks 96 Comments

If you want a specific preview image for your YouTube video, you’re pretty much out of luck. When you upload a video, YouTube chooses 3 frames from your video based on an algorithm that might or might not be random. There are tips around for trying to game their algorithm, but that might be a little unethical and it’s unreliable since they’ve changed the algorithm over time. I think at youtube.com they’re welcome to do whatever they want, but when I’m displaying an embedded video on my own site I should be able to present the video with my choice of preview image – they’re my users and if I want to then I should be able to! I thought I would never find a way until now. Check it out below!



Before:




After:


The method uses two “div” containers, one containing the replacement preview image and one containing the video embed code. The video is hidden using inline CSS and a bit of JavaScript toggles the image hidden and the video visible when the image is clicked. The image should be the same size of the video and should probably have some sort of “play” symbol so users know to click it.
Here’s the code for the containers:

 

<div onclick="thevid=document.getElementById('thevideo'); thevid.style.display='block'; this.style.display='none'"><img src="IMAGE_PATH_URL" style="cursor:pointer" /></div><div id="thevideo" style="display:none">

(put the YouTube embed stuff here)

</div>



Here is the exact code from above example.


<div onclick="thevid=document.getElementById('thevideo'); thevid.style.display='block'; this.style.display='none'"><img style="cursor: pointer;" src="http://dwssite.com/wp-content/uploads/2012/02/YT-pic.jpg" alt="" /></div>
<div id="thevideo" style="display: none;"><object width="560" height="315" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/De_x9NVCEy4?version=3&amp;hl=en_US&amp;autoplay=1" /><param name="allowfullscreen" value="true" /><embed width="560" height="315" type="application/x-shockwave-flash" src="http://www.youtube.com/v/De_x9NVCEy4?version=3&amp;hl=en_US&amp;autoplay=1" allowFullScreen="true" allowscriptaccess="always" allowfullscreen="true" /></object></div>

CHECK OUT OTHER YOUTUBE EMBED TRICKS

That’s it!

Created by

Jarrett Gucci is the owner of Dynasty Web Solutions. A full service Internet presence provider specializing in WordPress development for business owners. Jarrett Gucci along with his team of professionals have designed over 400 WordPress websites. Jarrett Gucci believes strongly in creating websites that are unique, functional and generate referrals.

Facebook Twitter LinkedIn Google+ YouTube 

Did you enjoy this article?
"Subscribe & Get my Top 100 MUST HAVE WordPress Plugins E-book Download"
Subscribe to our Blog and get an instant download to the Top 100 MUST HAVE WordPress Plugins E-book Download complete with secret Plugins revealed.



96 Responses to “Change the YouTube Embed Image to Custom Image”

  1. Camille says:

    Hello, thanks for the tutorial. Unfortunately, my client uses IE9 and the video starts playing automatically behind the image. So you can hear the video but not see it until clicking the overlay image. Do you know of a fix for this? It works on all other browsers (aside from requiring a double click on mobile devices).

    • Jarrett Gucci says:

      Researching now. Best fix it to delete IE from any and all computers…;)

      • Camille says:

        I actually figured out a workaround with javascript. I switched the autoplay to equal 0 on url in the embed code then switched it dynamically to autoplay=1 once the overlay image is clicked.

        Javascript:

        $(‘#overlay’).click(function(){
        $(“iframe”).attr(“src”, $(“iframe”).attr(“src”).replace(“autoplay=0″, “autoplay=1″));
        });

  2. Beatrice Sch says:

    Many thanks for sharing this. It’s great!
    Any other brilliant solution without Flash? so it could work also on ipad…. grrrrr
    Thanks again.

  3. Alex says:

    Just wanted to say thanks. I have tried a number of other methods with varying degrees of success but this works like a charm.

  4. B. Ross says:

    When I look at your page on Android, under After the still image shows up above the YouTube video until you click on the image and then only the video is visible. On a desktop computer you only see the image under After which is how it should be. Is there an issue with Android and this technique? Thanks.

  5. Jazzman says:

    My question is how can i get the feed of video thumbnails and when users click it it will play on my site on another page……like in a Video Viewer page for example?

  6. WD says:

    Just wanted to pat you on the back for your tutorial. I was all over the net looking for this very solution, and though many got close….none had it right. Thank you so much for taking the time to put this out there. If it is okay with you I will be adding this to many of the blogs and support forums that I happened across whilst looking for this answer.

  7. Conor says:

    This is my code

    When I click on the image it loads the video. But then I have to click “Play”. How do I change it so the video automatically plays once I click on the image?

  8. JD says:

    If you have several videos on one page make sure you make “the video” part unique. It occurs twice in the code. So you need to change it in 2 places.

    it I just used “the video1″; “the video2″; etc. and it works perfectly with several videos on one page.

  9. Tay says:

    Hi Jarrett,

    Any YouTube TOS implications involved with covering the embed? It seems like covering the player was listed as something you couldn’t do.

    Thoughts?

  10. Gert-Jan says:

    Fyi; its now possble to select a custom thumbnail on Youtube too; http://screencast.com/t/7PbOtS5yD97

  11. steve says:

    Hi,

    Thanks for this! Is there anyway to have this set so that you don’t have to hit play twice when viewing on mobile? I’m viewing my site (http://www.bestdesignedcity.com/new/) on my phone and I have to hit play twice.

    Thanks,
    Steve

  12. AirFlame says:

    Hey have a question i am using Your code in here : http://www.passion-stud.nazwa.pl/passionstudio/#realizacje-filmowe

    But when i enter in one movie run it and then enter another one and get back to first one the image is still gone. Any code to reset the display:none style when clicking on products that are bellow ? Sorry for poor english.

  13. Jose Paitamala says:

    Thank you very much for the tutorial, it really helped.

  14. Moray Clowes says:

    Hi Jarrett
    Bit of a different question here. Is there a way to display a custom image – I want a product shot – after the youtube hosted embedded video finishes?
    Thanks, and thanks for all your other posts too.
    Moray

  15. Q says:

    I wish it worked on the tablet and mobile without troubles. The youtube player will scale with the page device, but the CSS thumbnail misbehaves relative to the device. Bummer. I really really like this script.

  16. Aniket says:

    thanks mate..CHEERS!!!

  17. Laine says:

    I still have to click twice.I appreciate your help with code below…

  18. Pankaj says:

    Hi Jarret,

    Thanks for the nice trick. It is really helpful for me. But I am facing an issue when I run this trick on the mobile device. On mobile this trick is not working. I also opened this page itself on mobile, we have to click two times to play the video (first click on image then second click on video).

    Can you please help me out in this.

    Thanks
    Pankaj

  19. Aniket says:

    ur trick is the best just one problem …………..where exactly to add the autoplay=1.can u tell me with an example..thanks.

  20. Kerstey says:

    Hi
    Many thanks for this – I decided in the end to not use it though as I was having trouble with the auto play and decided it would be better for it to auto play when the page that it was on was loaded.
    I wonder if it’s possible though once the video has finished to display a cover picture at the end, rather than the start as it doesn’t display a very good “still” once it’s finished!
    Thanks!

  21. WhoFlungPoo says:

    This does not work properly in Opera. The video starts playing behind the image automatically.

    FireFox, Chrome, and IE all seem fine.

  22. Jonathan Wells says:

    Toward the end of my comment it was supposed to say both the iframe and object codes. Those words must have been deleted because of the HTML tags enclosing them.

  23. Jonathan Wells says:

    Hey Jarrett, this is a great work around for something that Youtube should add as a feature (but doesn’t). There is a glitch somewhere that I have not been able to figure out. This trick works great for the first video on a page. If you add a second video anywhere on the same page the one on the bottom will vanish and the one on the top will play. I tried both the and codes and the same thing happened. Any ideas?

  24. Kat says:

    Hi Jarrett,

    Thanks so much for looking at my code. You provide excellent customer service!

    Best wishes,

    Kat

  25. Chris says:

    Followed the instructions from others about using the old embed code to get a video to auto-play, but the auto-play does not work in iOS. I’m guessing this has something to do with the old embed code, Flash vs. HTML5… Anyone have any idea how to get this to work on iOS devices?

  26. Drew says:

    Thanks.!!!

  27. Barry says:

    Hi there,

    I am using this on a few client sites and I am trying to put it on a site atm. I am using it for two youtube videos. The problem is it works fine for the first one but for the second one when I click it, the youtube video disappears? Has anyone came across this problem?

    If you could get back to me asap that would be awesome.

    Thanks,

  28. ryan says:

    Seriously helpful. Thank you – everyone.

  29. Brenda Ellison says:

    I just wanted to thank you for giving me credit for this article on Google! and #1 position too! woohoo…happy to be working with you!
    Brenda

  30. Renee Chilton says:

    I’ve got the concept working (although I need to change my image sizes, but I can not get it to play automatically when you click the first image. You have to click the first image which brings up the you tube and then you have to click that as well.

    Thanks

  31. Donny Duke says:

    It works quite well now. Thank you, we say it so often, but I’m thanking you here, really thanking you Jarrett. You go that extra mile even when all you get is a simple thank you. That’s professional. Of course, if I were shopping around for what your business offers, I’d use your business.

  32. Donny Duke says:

    Thank you for such a prompt reply, but I haven’t been able to get the thing to go. Below is an example of how I’m doing it, and my questions concern basic things like include the parenthesis and quotation marks or no, put the YouTube embed code twice or once, and about the size of the image. I looked at the YouTube embed code and resized my image to how close I could get to that (theirs: height 315, width 420), but the image looks too small in my experiments when I’ve gotten it to show up in preview (again I’m using Blogspot). The other thing is I uploaded my image to an image hosting service and am using the ‘thumbnail for website’, and it’s quite long looking, and I’m wondering if that is correct for putting in your code. There are many options. What would I want the image.path.url to look like? Sorry for taking up so much of your time.

  33. Donny Duke says:

    I’m afraid I need a more step by step explain. I have the image on my desktop the proper size. How do you embed it into the code you give, and do you do this embeding of both the image and the video in HTML or compose view of post (I’m using Blogger)? Thanks in advance.

  34. Philip Zeplin says:

    There is a big of a problem with this:
    You need the autoplay code for this to work (without having to click twice).
    However, that means you won’t get any views. YouTube does not (and has not, for a while) counted video views that are gathered through auto-play, only by user actively clicking the button. If the autoplay URL is used, I’m 99% sure YouTube will NOT count any views to your video, that you get through this.

    • Jarrett Gucci says:

      This is very true and also not the point of this trick. Doing this accomplished better brand marketing and gives control over the embed image. A website visitor looking to buy from you will not make a buying decision based on YT views. Besides an embedded video does not display the views anyways so the only way of seeing them would be at YT.

  35. Deborah Whipp says:

    Great code – thanks. And thanks to Scollina for pointing out the need to add autoplay=1 in the embed section at the end of the video URL. That finally got the video I was embedding to play on click.

  36. Scollina says:

    Old Embed code is no longer an option on YouTube, but I found it elsewhere:

    use the old fashioned embed code and place ;autoplay=1; in the url…

    An example being:

  37. Goukaseishi says:

    Great tutorial Jarrett. I’ve just used it on a website and it looks perfect :).

  38. Alex says:

    Hello Jarrett Gucci;
    I do exactly what you said and it does not work. You mention javascript in the article, “The video is hidden using inline CSS and a bit of JavaScript toggles the image hidden and the video visible when the image is clicked.” Can you give us the javascript code also? I see inline CSS code but I don’t see js code. Can you give us the js code?

    Thanks Jarrett.

    • Jarrett Gucci says:

      Hello Alex

      The exact code is below. Make sure you use the “Old Embed” code option when getting it from YouTube.

      <div onclick="thevid=document.getElementById('thevideo'); thevid.style.display='block'; this.style.display='none'"><img src="IMAGE_PATH_URL" style="cursor:pointer" /></div><div id="thevideo" style="display:none">

      (put the YouTube embed stuff here)

      </div>

  39. Levi says:

    @Terry – I figured it out!!

    To everyone who is trying to use this code but having difficulties getting the video to autoplay once the overlay image is clicked, here’s what you have to do:

    You have to use the “old embed” code (there’s a checkbox in the video embed section for this).

    The standard iFrame embed code will not work properly with this code. It will force the user to click the image and then click play on the video rather than simply clicking once.

    Just wanted to share as I’ve been trying to figure this out for hours now.

    thanks!

  40. BrendaEllison says:

     @JarrettGucci  This is awesome and will do this when I get home this afternoon! thanks Jarrett

  41. JarrettHolmes says:

    Jarrett is this just for adding the code to your site? How does it show up on YouTube that way? -Jarrett

  42. Zack says:

    Love this tip Jarrett, but it’s not working for me. Not sure why, but maybe think it has something to do with the iframe tags.

    I copied the code, created my thumbnail the same size as the youtube video and added the image within the IMAGE_PATH_URL quotes. Next, I added the youtube iframe embed code within the (put the YouTube embed stuff here) as specified. Finally, I added the code within the html editor inside wordpress.

    When the post goes live, I get a small box of sorts with no video and no image, just a small box. Any ideas as to why this is not working?

    Thanks for any/all help bud. Go Sabres!

  43. terry says:

    Really like the idea – it works well except for one issue I am experiencing and I can’t seem to figure it out. For some reason once I wrap the YT embed code in the div the video quality is considerably reduced. Any suggestions on this?

    Also, one quick other item. On your AFTER EXAMPLE the video auto plays only after the preview image is clicked on. I used the__ &autoplay=1 __ in my YT embed code but the video just auto plays without clicking on the preview image. What YT autoplay function did you use to accomplish your AFTER EXAMPLE video.

    Many THANKS in advance!!!

  44. Ronnie (aka Video SEO Hound) says:

    We have been looking for ways to get better thumbnails for years. This one here looks interesting. But we also just discovered a YouTube Hack that is currently working, and I’ve tweaked it so it works everywhere online.

    You don’t have to mess with trying to figure out the timing of the thumbnail flash image (I tried working on that for 4+ years!) – I made a tutorial on how to do it. Search for VideoLeadsOnline’s tutorial called “YouTube Thumbnail Trick 2012″ or click here: http://www.youtube.com/watch?v=Z8Npxtubc4c – Enjoy!

  45. Merrin Robinson says:

    Thanks for the tip Jarrett! I’m sharing this :)

  46. Clint Butler says:

    Finally a way to do this that actually works!! Thank you so much for the tip. There are so many people teaching that you need to game the YouTube system to get the picture you want displayed, finally something better.

Leave a Reply


8 × = sixty four

Facebook