Lazyframe-advanced NPM

LazyframeAdvanced

comment: <> ([ npm version (https://badge.fury.io/js/lazyframeAdvanced.svg)](https://badge.fury.io/js/lazyframeAdvanced))

Dependency-free library for lazyloading iframes like YouTube, Vimeo, Twitter, Google Maps, Codepen etc.

Watch some examples here: https://jmartsch.github.io/lazyframeAdvanced

Why do you need it?

JavaScripts loaded from external providers like YouTube are big and slow down the loading time of your website, even if your visitors don't want to see your beautiful videos. This also negatively impacts your ranking on Google

For example here are the number of requests and filesizes of some well-known services.

YouTube – 11 requests ≈ 580kb
Google maps – 52 requests ≈ 580kb
Vimeo – 8 requests ≈ 145kb

LazyframeAdvanced creates a responsive placeholder for embedded content and requests it when the user interacts with it or it lazyloads if it is in view. This decreases the page load and idle time.

LazyframeAdvanced comes with brand-like themes for YouTube and other services.

Why is it advanced?

The original Lazyframe library from Viktor Bergehall is good as it is. But there were some features missing, that we needed, so we created our own deviation.

What we enhanced

use IntersectionObserver instead of the old and slow scroll event listener
lazyload is the default behaviour
move to a modern and fast build stack with vite
added codepen as a vendor
removed vine, as it does not exist anymore
add aspect ratios for the placeholders

New features that we are planning to add:

make it compatible with a cookie consent tool and only load the frame if consent for a specific vendor cookie is given, else display a placeholder element that you can modify by yourself
add thumbnail placeholder with image element instead of background element
overlay thumbnail with play button
add style for Google Maps placeholder
automatically add data-vendor based on URL

Installation Instructions

Install

NPM

npm install lazyframe-advanced

Import

JavaScript ES6 import

import lazyframe from 'lazyframe-advanced';
import 'lazyframe-advanced/lazyframe.css'

comment: <> (Include the library directly. Currently does not work because there is no minified standalone version. )

comment: <> (`html)

comment: <> ()

comment: <> (`)

comment: <> (Sass import)

comment: <> (`sass)

comment: <> (@import 'src/scss/lazyframe';)

comment: <> (`)

comment: <> (Include CSS in HTML)

comment: <> (`html)

comment: <> ()

comment: <> (`)

Initialize

// Passing a selector
lazyframe('.lazyframe');

// Passing a nodelist
let elements = document.querySelectorAll('.lazyframe');
lazyframe(elements);

// Passing a jQuery object
let elements = $('.lazyframe');
lazyframe(elements);

Options

You can pass general options to lazyframe on initialization. Element-specific options (most options) are set on data attributes on the element itself.

General options and corresponding defaults

lazyframe(elements, {
   // Callbacks
   onLoad: (lazyframe) => console.log(lazyframe),
   onAppend: (iframe) => console.log(iframe),
   onThumbnailLoad: (img) => console.log(img)
})

possible options

option name	default value	description
onLoad	function: empty	Callback function for when a element is initialized.
onAppend	function: empty	Callback function for when the iframe is appended to DOM.
onThumbnailLoad	function: empty	Callback function with the thumbnail URL.

Element-specific attributes

Use these attributes on your HTML element like this:

<div
    class="lazyframe"
    data-vendor=""
    data-title=""
    data-thumbnail=""
    data-src=""
    data-ratio="1:1"
    data-initinview="false">
</div>

attribute name	possible values	description
data-vendor	youtube, vimeo, codepen	Attribute for theming lazyframeAdvanced. Currently supported values are `youtube`, `youtube_nocookie` and `vimeo`
data-title	string: anything you like	Attribute for custom title. Leave empty to get value from API
data-thumbnail	string: url	URL of the thumbnail image you would like to show, before the video is loaded
data-src	string: url	The source of what you want to lazyload
data-ratio	string: url	The ratio of the lazyframe. Possible values: 16:9, 4:3, 1:1
data-initinview	boolean: true	Set this to true if you want the resource to execute (for example video to play) when the element is in view.

Changelog

v2.0.0 much new stuff and optimized demo page
v1.2.4 fix IntersectionObserver
v1.2.3 set lazyload to false, as IntersectionObserver is not working yet
v1.2.0 release on npm, uses vitejs instead of webpack
v1.1.901 betterify example page
v1.1.9 remove gulp and rollup and use webpack instead
- use Babel 7
- add changelog to README
- add Compile from source instructions
v1.1.8 add rel=0 parameter to YouTube videos