youtube-lazyload

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

• npm install youtube-lazyload

• 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"

• 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.