Comments 1 2 37524 Views

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 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!



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');'block';'none'"><img src="IMAGE_PATH_URL" style="cursor:pointer" /></div><div id="thevideo" style="display:none">

(put the YouTube embed stuff here)


Here is the exact code from above example.

<div onclick="thevid=document.getElementById('thevideo');'block';'none'"><img style="cursor: pointer;" src="" alt="" /></div>
<div id="thevideo" style="display: none;"><object width="560" height="315" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase=",0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value=";hl=en_US&amp;autoplay=1" /><param name="allowfullscreen" value="true" /><embed width="560" height="315" type="application/x-shockwave-flash" src=";hl=en_US&amp;autoplay=1" allowFullScreen="true" allowscriptaccess="always" allowfullscreen="true" /></object></div>


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

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

How to YouTube 0 Comments

Stream Your YouTube Channel On A Page Inside Your WordPress Website

ContentsCOPY CODE BELOWCOPY CODE BELOWOther Plugin That Will Do This: WordPress shortcodes are great. They let you perform complex operations or display dynamic content with just a tiny bit of

Ninja Tricks 0 Comments

Create a WordPress Menu With Images – No Plugin Needed

ContentsTake your menu look from this:To this:Step #1 – Create a MenuStep #2 – Create HTML codeStep #3 – Create a Menu ItemStep #4 – Adjust Menu ItemStep #5 –

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

1 Comment

  1. Dennis
    July 19, 00:00 Reply

    I see nothing after the AFTER.

    Also, what date is this post published? (always good to include a publication date in internet posts, an often violated good practice).


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.