Change the YouTube Embed Image to Custom Image

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!

Previous What the @$#@ happen to Godaddy?
Next Add You Own Custom Share Image for Each Page or Post - Wordpress Plugin

About author

Jarrett Gucci
Jarrett Gucci 289 posts

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.

You might also like

Ninja Tricks 0 Comments

Custom Facebook LIKE Box | Customize Facebook LIKE Box Using CSS

The Facebook Like box placed on your website /blog is probably the easiest way to attract new fans to your Facebook page. And the same rectangular box can even help

How to YouTube 0 Comments

YouTube Embed Code Options – Have it Autoplay

Here are some problems I face when embedding YouTube videos on my website. First, the user has to click on the “play” button for the video to play. People who

WordPress Resources 0 Comments

Stream Your YouTube Channel On A Page Inside Your WordPress Website

WordPress shortcodes are great. They let you perform complex operations or display dynamic content with just a tiny bit of text in any page or post. I recently needed a

Ninja Tricks 0 Comments

Create a WordPress Menu With Images – No Plugin Needed

WordPress makes it easy to create and adjust navigation menus but one thing that is difficult to do is create a menu that is image based.  Yes there are many

0 Comments

No Comments Yet!

You can be first to comment this post!

Leave a Reply