How to Change the YouTube Embed Image to Custom Image

We can add our custom image at the place of YouTube embed image. This is used to make our video presentation effectively. We can add our custom image frame before the video starts. For this we can use the following script.

<div id=”theimg”>
<img style=”cursor: pointer;” src=”https://www.powerfaq.com/wp-content/uploads/2015/04/powerfaq.jpg” alt=”” />
</div>

<div id=”thevideo” style=”display: none;”>
<object width=”457″ height=”290″ 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/ryWmrbQ9OoM?version=3&amp;hl=en_US&amp;autoplay=1″ />
<param name=”allowfullscreen” value=”true” />

<embed width=”457″ height=”290″ type=”application/x-shockwave-flash” src=”http://www.youtube.com/v/ryWmrbQ9OoM?version=3&amp;hl=en_US&amp;autoplay=1″ allowfullscreen=”allowfullscreen” allowscriptaccess=”always” allowfullscreen=”allowfullscreen” />

</object>
</div>

<script type=’text/javascript’ src=’https://www.powerfaq.com/wp-includes/js/jquery/jquery.js?ver=1.11.1′></script>

<script type=”text/javascript”>
jQuery(‘document’).ready(function($){
jQuery(‘#theimg’).click(function(){
$(‘#theimg’).hide();
thevid=document.getElementById(‘thevideo’); thevid.style.display=’block’;
});
});
</script>

This jQuery will add our custom frame before the video play. When we click on the video it will run our script and starts the video.