Lightweight jQuery Plugin To Lazy Load Youtube Videos - Lazy Loader
File Size: | 4.91 KB |
---|---|
Views Total: | 2909 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

YouTube Lazy Loader is a super light (~2kb minified) jQuery plugin used to lazy load & control youtube videos to improve the page load time.
See also:
How to use it:
1. Create a container with data-youtube
attribute for youtube video ID.
<div class="youtube" data-youtube="4eYSpIz2FjU"></div>
2. Include the latest jQuery javascript library and jQuery youtube laze loader plugin at the end of the document.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.youtube.lazyloader.min.js"></script>
3. Call the plugin on the youtube container.
<script type="text/javascript"> $(function () { $(".youtube").YouTubeLazyLoader(); }); </script>
4. Settings.
<script type="text/javascript"> $(function () { $(".youtube").YouTubeLazyLoader({ youtubeId: '', // Use it to override the YouTube Id using JavaScript. title: '', // Override the title text. To get the title from YouTube, leave this blank. embedTitle: true, // Embed the video title in the container. titlePosition: 'bottom', // Position of the title div in the container. idAttribute: 'data-youtube', // Attribute containing the YouTube Id. cssClass: 'YouTubeLazyLoadBox', // Attribute containing the CSS class to be assigned to the container div. autohide: 2, autoplay: 0, color: 'red', controls: 1, fs: 1, loop: 0, showinfo: 0, theme: 'light' }); }); </script>
Change log:
2014-02-21
- Big fix to add CSS class
This awesome jQuery plugin is developed by abhinayrathore. For more Advanced Usages, please check the demo page or visit the official website.