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.
<div class="lazyYT" data-youtube-id="_oEA18Y8gM0" data-ratio="16:9" data-display-duration="true">loading...</div>
- Get Your Youtube API_KEY. It should look something like this:
AIzaSyCawA87g_pgTbSNPhiWAemy-mFKszJGl4M
. - Include the lazyYT JS and CSS files.
- Add a
div
where you want the video to be located. Add the id of the Youtube video to the data attributeyoutube-id
. - Either add the video width and height to
data-width
anddata-height
, or add an ascpent ratio like16:9
todata-ratio
, none are required. - Any optional parameters you wanted passed to the iframe url should be added to
data-parameters
. - Get it started with
$('.lazyYT').lazyYT(YOUR_YOUTUBE_API_KEY);
Note: make sure to crate your own API_KEY, the one used in demo will not work for your domain for long.
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
});
(CC) Creative Commons