Lazyload Youtube video

Install this package and lazy load all the youtube video with the class "youtube". Ideal for loading the site quickly.

How to Use

1. npm install youtube-lazyload

2. On HTML use following code:

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

   Note:

   Value of the data-embed is the id of the youtube video. For e.g.

   if the youtube link is: https://www.youtube.com/embed/EQW3n5aGdSI

   then, the data-embed is : EQW3n5aGdSI

   To allow fullscreen, add attribute data-fullscreen="true". For e.g.

   <div class="wrapper">
       <div class="youtube" data-embed="EQW3n5aGdSI" data-fullscreen="true">
           <div class="play-button"></div>
       </div>
   </div>
   

   To disable fullscreen, either remove attribute "data-fullscreen" or set it to false data-fullscreen="false"

3. Use the following 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.96;
   }
   .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%;
       transform: translate3d( -50%, -50%, 0 );
   }
   .youtube iframe {
       height: 100%;
       width: 100%;
       top: 0;
       left: 0;
   }
   
   

Source

This is the exact copy of the code by https://codepen.io/tutsplus/. The working example is available on the Codepen.