Lazyembed2 NPM

LazyEmbed

LazyEmbed is a JavaScript library for loading embeds and individual content on click.

Install

Install LazyEmbed via npm

npm install lazyembed2

Include in your site

<!DOCTYPE html>
<html>
    <head>
        <!-- ... -->
        <link rel="stylesheet" href="dist/lazyembed.min.css" />
    </head>
    <body>
        <!-- ... -->
        <script src="dist/lazyembed.min.js"></script>
    </body>
</html>

Adjust your markup

Call LazyEmbed

new LazyEmbed();

See example.html for an example.

API

HTML

Argument	Required	Description
`data-src`	No	The source of the embedded content. Usually you will use this instead of an `iframe`'s `src` attribute.
`data-placeholder`	No	An URI of an image used as placeholder for the embedded content. For example a video thumbnail.

JavaScript

You can pass an object of options to LazyEmbed's constructor.

Option	Type	Required	Default	Description
`elements`	string \| Countable<HTMLElement>	Yes	`'[data-lazyembed]'`	The embed elements to lazyload. Either a string used as selector or a countable of `HTMLElement`s implementing a `length` property.
`overlayText`	`string`	Yes	`'Click to load'`	The text printed on the overlay. Can contain HTML.
`overlayBackground`	`string`	No	-	*DEPRECATED* The background color of the overlay. Can be any CSS color.
`overlayColor`	`string`	No	-	*DEPRECATED* The overlay's text color. Can be any CSS color.
`adoptResponsiveEmbed`	`bool`	Yes	`true`	If set to `true`, LazyEmbed tries to adept Bootstrap's `embed-responsive` class from the embed element.
`excludeElements`	`string`	Yes	`'a'`	A selector defining child elements of the overlay which should not trigger loading the embed content. For example one would not want to trigger the loading when clicking on a link to the privacy policy.
`classes.root`	`string`	Yes	`'lazyembed'`	The class to apply to the outermost LazyEmbed element wrapped around the embed element. When not applying the default class, you have to adjust the CSS.
`classes.overlay`	`string`	Yes	`'lazyembed__overlay'`	The class to apply to the overlay element. When not applying the default class, you have to adjust the CSS.
`classes.text`	`string`	Yes	`'lazyembed__text'`	The class to apply to the overlay text element. When not applying the default class, you have to adjust the CSS.
`classes.placeholder`	`string`	Yes	`'lazyembed__placeholder'`	The class to apply to the placeholder image. When not applying the default class, you have to adjust the CSS.
`classes.embed`	`string`	Yes	`'lazyembed__embed'`	The class to apply to the embed element. This class is just for identifying purpose, it doesn't define any styling by default.
`onClick`	`function`	Yes	Empty function	A callback function of the following form `function(HTMLElement embed)`, called when the user clicks on the overlay and after the LazyEmbed parts are hidden and the embedded content is requested.
`onLoad`	`function`	Yes	Empty function	A callback function of the following form `function(HTMLElement embed)`, bound to the `iframe`'s `load` event.
`onInit`	`function`	Yes	Empty function	A callback function of the following form `function(HTMLElement wrapper)`, called when LazyEmbed has fully initialised the embed element.

Loading individual (non-iframe) content

Omit the data-src attribute and use the onClick option to load the content manually.

Image Proxy

Use the proxy.php file for hiding the user's IP address from the image provider.

Just use the proxy's URI as the data-placeholder attribute's value and pass the image's URI to the proxy's uri parameter (remember to escape the URI). For security reasons you have to whitelist the providers' host names. By default only googleapis.com and ytimg.com are whitelisted, but this list can be easily adjusted. Just have a look on the proxy.php file.