jQuery Plugin To Lazy Load Youtube Videos Until Needed - LazyTube

jQuery Plugin To Lazy Load Youtube Videos Until Needed - LazyTube
File Size: 8.47 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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'
  • data-target="magnificPopup": target handler

5. Customize the embed code in the JavaScript:

$('.demo').lazyTube({
  embedCode: '<div class="embed"><iframe width="{width}" height="{height}" src="//www.youtube-nocookie.com/embed/{id}?{flags}" frameborder="0" allowfullscreen></iframe></div>'
});

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