jQuery Plugin To Lazy Load Youtube Videos Until Needed - LazyTube

Yet another jQuery Youtube video lazy load plugin that displays the thumbnail images of Youtube videos on the webpage and then plays them when clicked. 

See also:

• Lightweight jQuery Plugin To Lazy Load Youtube Videos - Lazy Loader
• Lightweight jQuery Youtube Video Lazy Load Plugin - LazyYT.js

How to use it:

1. First you need to load both jQuery library and the jQuery LazyTube plugin at the bottom of the page.

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

2. Create a placeholder element and specify the video ID as follow:

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

3. Just call the function on the placeholder and done.

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

4. More HTML data attributes:

• data-width="480": width of the Youtube player
• data-height="320": height of the Youtube player
• data-autoplay="yes": autoplay
• data-thumbnail="default": the thumbnail size you want to get: 'mqdefault', 'hqdefault', 'sddefault', 'maxresdefault'

5. The plugin also supports other video services and platforms (like Vimeo) by overring the embed code in the JavaScript:

$('.demo').lazyTube({
  thumbnailCode: function(el, id, thumbnail) {
    return '<img src="https://i.vimeocdn.com/video/'+ el.data('thumbnail') +'.jpg" alt="" />';
  },
  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>'
  }
});

6. Load the video in another element using the 'targetHandlers'. In this example, the video will be loaded in the Magnific Popup box.

<div data-id="VIDEO ID" data-target="magnificPopup" class="demo"></div>

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

Changelog:

2020-09-19

• Added support for other services

---

This awesome jQuery plugin is developed by biohzrdmx. For more Advanced Usages, please check the demo page or visit the official website.