Lightweight jQuery Youtube Video Lazy Load Plugin - LazyYT.js
File Size: | 4.8 KB |
---|---|
Views Total: | 7194 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.