Lightweight jQuery Youtube Video Lazy Load Plugin - LazyYT.js

LazyYT.js is a small and fast jQuery plugin for delaying the loading of YouTube videos on your website to reduce the page loading time to improve user experiences.

It works by initially loading a preview image, and then waiting until the video is actually clicked to load and start the full YouTube video.

How to use it:

1. Load the latest jQuery and jQuery lazyyt.js libraries at the bottom of your web page.

<script src="/path/to/cdn/jquery.min.js"></script>
<link rel="stylesheet" href="/path/to/lazyYT.css" />
<script src="/path/to/lazyYT.js"></script>

2. Insert your Youtube video using data-* attributes as follows:

<div 
  class="lazyYT" 
  data-youtube-id="_oEA18Y8gM0" 
  data-ratio="16:9" 
  data-width="fixed width"
  data-height="fixed height"
  data-display-duration="true">
  loading...
</div>

3. Initialize the plugin on the video wrapper and insert your own Youtube API key.

$( document ).ready(function() {
  $('.js-lazyYT').lazyYT('Your API Key Here');
});

4. Available options to customize the plugin.

$('.js-lazyYT').lazyYT('Your API Key Here',{
  youtube_parameters: 'rel=0',
  loading_text: 'Loading...',
  display_title: true,
  default_ratio: '16:9',
  display_duration: false,
  callback: null,
  // Advanced settings
  video_loaded_class: 'lazyYT-video-loaded',
  container_class: 'lazyYT-container'
});

Changelog:

2025-02-14

• updated to support Youtube API V3
• updated doc

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.