lazyYT.js

Description

This is a jQuery plugin to lazy load Youtube videos. On the initial load, the div will be appended by a preview img of the video. On click of the image, the preview img will be replaced by the autoplaying iframe Youtube video.

Since 2015-07-08 it uses Youtube API v3.

Demo

1. Demo of v1.3.0

Setup

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

1. Get Your Youtube API_KEY. It should look something like this: AIzaSyCawA87g_pgTbSNPhiWAemy-mFKszJGl4M.
2. Include the lazyYT JS and CSS files.
3. Add a div where you want the video to be located. Add the id of the Youtube video to the data attribute youtube-id.
4. Either add the video width and height to data-width and data-height, or add an ascpent ratio like 16:9 to data-ratio, none are required.
5. Any optional parameters you wanted passed to the iframe url should be added to data-parameters.
6. Get it started with $('.lazyYT').lazyYT(YOUR_YOUTUBE_API_KEY);

Note: make sure to create your own API_KEY, the one used in demo will not work for your domain for long.

Parameters / Settings

Default parameters:

$('.js-lazyYT').lazyYT({
  youtube_parameters: 'rel=0', // youtube URL parameters: https://developers.google.com/youtube/player_parameters#Parameters
  loading_text: 'Loading...', // displayed instead of video title while its loading
  display_title: true, // display title in video's info bar
  default_ratio: '16:9',
  display_duration: false, // display video duration in bottom right
  callback: function() {
    console.log(this);
  },
  
  // Advanced settings
  video_loaded_class: 'lazyYT-video-loaded', // adds this class after video loads into container
  container_class: 'lazyYT-container' // default CSS depends on this class
});

License

(CC) Creative Commons