Changing the Thumbnail on a YouTube Video to a Custom Image

Last Updated on November 28, 2014 GMT-0800 by Jordan

The following code will allow you to use a custom image for the thumbnail on a YouTube video.

<div style="float: right; padding: 20px;"><img style="cursor: pointer;" src="/wp-content/uploads/2012/10/iframeyoutubevideo.png" alt="" /></div>
<div id="thevideo" style="display: none; float: right; padding: 20px;"><object width="460" height="259" 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/tX4l7aPoYLU?version=3&amp;hl=en_US&amp;rel=0&amp;autoplay=1&amp;autohide=1" /><param name="allowfullscreen" value="true" /><embed width="460" height="259" type="application/x-shockwave-flash" src="http://www.youtube.com/v/tX4l7aPoYLU?version=3&amp;hl=en_US&amp;rel=0&amp;autoplay=1&amp;autohide=1" allowfullscreen="allowfullscreen" allowscriptaccess="always" allowfullscreen="allowfullscreen" /></object></div>

Here is an example of what the video would look like.

<div style="float: right; padding: 20px;"><img style="cursor: pointer;" src="/wp-content/uploads/2012/10/iframeyoutubevideo.png" alt="" /></div>
<div id="thevideo" style="display: none; float: right; padding: 20px;"><object width="460" height="259" 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/tX4l7aPoYLU?version=3&amp;hl=en_US&amp;rel=0&amp;autoplay=1&amp;autohide=1" /><param name="allowfullscreen" value="true" /><embed width="460" height="259" type="application/x-shockwave-flash" src="http://www.youtube.com/v/tX4l7aPoYLU?version=3&amp;hl=en_US&amp;rel=0&amp;autoplay=1&amp;autohide=1" allowfullscreen="allowfullscreen" allowscriptaccess="always" allowfullscreen="allowfullscreen" /></object></div>

Did you like this article?