Changing the Thumbnail on a YouTube Video to a Custom Image

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?


0 Shares:
You May Also Like

FOSS Advertising Network Ad Bard

Ad Bard is a free advertising community for FOSS oriented websites and advertisers. A snippet from their about page
The Ad Bard Network aims to foster a friendly and useful advertising community for FOSS oriented websites and advertisers. As a fellow Ad Bard, you will help to ensure that the advertisements in our network remain useful, relevant, and non-obnoxious. Ad Bard members earn 80% of the price-per-click each time an advertisement is clicked on your website. Our advertising community is entirely built with free and open source software, with all involved algorithms and schemas freely available for public scrutiny.
Definitely a neat and good way for FOSS websites to generate revenue aside from donations. Ad Bard Website
Read More