Youtube Responsive With Lazy Loading OnClick

by dibalik seo

HTML

<div class="youtube" onclick="videoPlay(this)">
<div class="youtube-resposive">
<img alt="youtube image" src="http://i.ytimg.com/vi/vyT-oGDnMqE/sddefault.jpg" width="500" height="281"/> 
    <!--<iframe src="http://www.youtube.com/embed/vyT-oGDnMqE?autoplay=1&autohide=1" frameborder="0" allowfullscreen="1"></iframe>-->
</div>
</div>
</div>

CSS

<body><div class="youtube_box">
<div class="youtube" onclick="videoPlay(this)">
<div class="youtube-resposive">
<img alt="youtube image" src="http://i.ytimg.com/vi/qwN01jlSD8c/sddefault.jpg" width="500" height="281">  
    <iframe src="http://www.youtube.com/embed/qwN01jlSD8c?autoplay=1&amp;autohide=1" frameborder="0" allowfullscreen="1" __idm_id__="828112897"></iframe>
</div>
</div>
<script>
//<![CDATA[
function videoPlay(anchor){
   anchor.innerHTML = anchor.innerHTML.replace('<!--','').replace('-->','');
   anchor.onclick= null;
   return false;
};
//]]>
</script>
</div></body>