Lightweight jQuery Youtube Video Lazy Load Plugin - LazyYT.js

LazyYT.js is a small and fast jQuery plugin for delaying loading of Youtube videos in your website for reducing the page loading time to improve user experiences. LazyYT works by initially loading a preview image, then waiting until the video is actually clicked to load and start the full Youtube video.

How to use it:

1. Load the jQuery javascript library and jQuery lazyyt.js at the bottom of your web page

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="lazyTY.min.js"></script>

2. Insert a youtube video using data-* attributes

<div class="js-lazyYT" data-youtube-id="_oEA18Y8gM0" data-width="420" data-height="315"></div>

3. Just call the plugin and you're done

$('.js-lazyYT').lazyYT();

4. A few customization options.

$('.js-lazyYT').lazyYT({

loading_text: 'Loading...',
default_ratio: '16:9',
callback: null, // ToDO execute callback if given
container_class: 'lazyYT-container'

});

Change logs:

2014-01-04

• bugfix: image size when fluid width sometimes fails

2014-07-05

• Added the ability to use responsive videos

2014-05-20

• update.

2014-03-08

• Move CSS to separate file for easier customization

2014-02-22

• Add ability to pass optional parameters

2014-01-14

• formatting tweaks
• move styles outside individual el setup function

 

---

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