Lightweight jQuery Youtube Video Lazy Load Plugin - LazyYT.js

File Size: 4.8 KB
Views Total: 7227
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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=""></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


4. A few customization options.


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


Change logs:


  • bugfix: image size when fluid width sometimes fails


  • Added the ability to use responsive videos



  • Move CSS to separate file for easier customization


  • Add ability to pass optional parameters


  • 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.