Load YouTube Videos Only When Want to Watch | jQuery.LazyTube

How to make use of it:

1. First you have to load each jQuery library and the jQuery LazyTube plugin on the bottom of the web page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.lazytube.js"></script>

2. Create a placeholder component and specify the video ID as observe:

<div data-id="ksjjKJ05K" class="demo"></div>

3. Just call the function on the placeholder and completed it.

$('.demo').lazyTube();

4. The plugin additionally helps different video providers and platforms by overring the embed code within the JavaScript:

$('.demo').lazyTube({
  thumbnailCode: function(el, id, thumbnail) {
    return '// Add Image Here';
  },
  embedCode: function(el, width, height, id, flags) {
    return '<iframe src="https://player.vimeo.com/video/'+ id +'?title=0&byline=0&portrait=0" width="'+ width +'" height="'+ height +'" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>'
  }
});

5. Load the video in one other component utilizing the ‘targetHandlers’.

$('.demo').lazyTube({
  targetHandlers: {
    magnificPopup: function(options, params) {
      $.magnificPopup.open({
        items: [{
          src: 'https://www.youtube.com/watch/?v=' + params.id,
          type: 'iframe'
        }]
      });
    }
  }
});

jQuery Plugin To Lazy Load Youtube Videos, lazyload iframe, LazyTube jQuery Plugin/Github

See Demo And Download