YOUTUBE: RESPONSIVE LAZY LOAD WITH ONLICK EVENT

Video Youtube which is embedded to our blog or our site is the one that makes heavier load. So this tutorial is about tricks a YouTube's embedded video with picture at first.

RESPONSIVE LAZY LOAD YOUTUBE VIDEO

• For startup, make your YouTube widget with a responsive from this tutorial:
YOUTUBE: RESPONSIVE DEFAULT VALID HTML5.

• And this lazy load youtube using fontawesome, you can installs on: HOW USING FONT AWESOME?

CSS: YOUTUBE ONCLICK LAZY LOAD

Copy this CSS before </head> tag:

<b:if cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}'>
<style type='text/css'>
/*<![CDATA[*/
.youtube{
text-align:center;
margin:0 auto;
width:100%;
}
.video-youtube-lazy{
position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;
margin:0;
}
.video-youtube-lazy:before{
content:"\f16a";
font-family:FontAwesome;
font-size:600%;
position:absolute;
top:50%;
left:50%;
margin:-32px 0 0 -32px;
cursor:pointer;
opacity:.7;
transition: all 0.2s ease-out;
}
.video-youtube-lazy:hover:before{
color:red!important;
opacity:1;
}
.youtube img{
width:100%;
height:auto;
margin-top:-9%;
z-index:1;
}
.youtube iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:2;
}
/*]]>*/
</style>
</b:if>

JAVASCRIPT: YOUTUBE RESPONSIVE LAZY LOAD

Copy this JavaScript before </body> tag:

<b:if cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}'>
<script>
//<![CDATA[
function videoPlay(anchor){
anchor.innerHTML = anchor.innerHTML.replace('<!--','').replace('-->','');
anchor.onclick= null;
return false;
};
//]]>
</script>
</b:if>

HTML: USAGE OF YOUTUBE LAZY LOAD

For calling this function or to showing 'The Responsive Youtube with lazy load onClick Event' add this script anywhere you want it shows.

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

CHANGEABLE: WHAT TO CHANGE

Change: VIDEOID to You Tube video's ID.