YouTube Lazy Hatch

Easy plug-and-play for swapping out a placeholder image with an iframe to avoid all the YouTube scripts from loading on page load.

Installation

npm install youtube-lazy-hatch

(This is assuming you are using a compiler that will process the imports.)

Adding JS

Create a separate JS file or add to an existing file

const lazyLoadVideos = require(['youtube-lazy-hatch']);

let embeds = document.querySelectorAll('.ylh-youtube-embed');

if (embeds) {
    lazyLoadVideos(embeds);
}

HTML

Add the target container <div class="ylh-youtube-embed"></div>

CSS

@import '~youtube-lazy-hatch/dist/index.css';