How to lazyload YouTube videos

Lazy loading is a technique by which you can load your stuff on your webpage when it is required. you can also lazyload images on your web pages and also the iframe as you know YouTube videos are embedded using iframe so we will lazyload that YouTube videos.

So what you have to do is just follow the steps which are provided below and follow them as they are said.

First of all you have to paste this CSS code in the head section of your website.

<style>.wrapper {
 max-width: 680px;
 margin: 60px auto;
 padding: 0 20px;
}

.youtube {
 background-color: #000;
 margin-bottom: 30px;
 position: relative;
 padding-top: 56.25%;
 overflow: hidden;
 cursor: pointer;
}
.youtube img {
 width: 100%;
 top: -16.82%;
 left: 0;
 opacity: 0.7;
}
.youtube .play-button {
 width: 90px;
 height: 60px;
 background-color: #333;
 box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
 z-index: 1;
 opacity: 0.8;
 border-radius: 6px;
}
.youtube .play-button:before {
 content: "";
 border-style: solid;
 border-width: 15px 0 15px 26.0px;
 border-color: transparent transparent transparent #fff;
}
.youtube img,
.youtube .play-button {
 cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
 position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
 top: 50%;
 left: 50%;
 -webkit-transform: translate3d( -50%, -50%, 0 );
         transform: translate3d( -50%, -50%, 0 );
}
.youtube iframe {
 height: 100%;
 width: 100%;
 top: 0;
 left: 0;
}</style>

After you have pasted this CSS code in the header section of your website now you need to have some JavaScript code to be added right after that CSS code.

<script>
( function() {

 var youtube = document.querySelectorAll( ".youtube" );
 
 for (var i = 0; i < youtube.length; i++) {
  
  var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
  
  var image = new Image();
    image.src = source;
    image.addEventListener( "load", function() {
     youtube[ i ].appendChild( image );
    }( i ) );
  
    youtube[i].addEventListener( "click", function() {

     var iframe = document.createElement( "iframe" );

       iframe.setAttribute( "frameborder", "0" );
       iframe.setAttribute( "allowfullscreen", "" );
       iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );

       this.innerHTML = "";
       this.appendChild( iframe );
    } ); 
 };
 
} )();
</script>

Now after pasting the above codes in the header section now let's see how the script works. when the page is loaded you are a same content will not be loaded it means that your video will not be loaded but the thumbnail will be appeared instead of that image when user Clicks on the add thumbnail then your video will be loaded.

It means that your iframe will be loaded on onclick event. So now where you want to insert a YouTube video you don't have to copy the embed code you just have to use the code provided below and replace the video ID with your youtube video ID.

<div class="wrapper">
 <div class="youtube" data-embed="AqcjdkPMPJA">
  <div class="play-button"></div>
 </div>
</div>