Last Updated on November 28, 2014 EST 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&hl=en_US&rel=0&autoplay=1&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&hl=en_US&rel=0&autoplay=1&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&hl=en_US&rel=0&autoplay=1&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&hl=en_US&rel=0&autoplay=1&autohide=1" allowfullscreen="allowfullscreen" allowscriptaccess="always" allowfullscreen="allowfullscreen" /></object></div>