Lazy Load iFrame Embedded Content With JavaScript – lazyframe.js

Preview:

Description:

lazyframe.js is a native JavaScript library used to delay the loading of iframe content for Google Maps and Youtube/Vimeo/Vine videos.

Installation:

# NPM
npm install lazyframe
# Bower
bower install lazyframe

How to use it:

Import the lazyframe.css and lazyframe.js into the html page.

<link rel="stylesheet" href="dist/lazyframe.css">
<script src="dist/lazyframe.min.js"></script>

Embed Google Maps, Youtube/Vimeo videos following the markup as follows. Available HTML data attributes:

• data-vendor: ‘youtube’, ‘youtube_nocookie’, ‘vimeo’
• data-title: Custom title
• data-thumbnail: Custom thumbnail image
• data-src: Path to video
• data-ratio: ’16:9′, ‘4:3’, or ‘1:1’
• data-initinview: Set to true if you want to play the video when scrolled into view
• data-autoplay: Enable autoplay

<div 
  class="lazyframe"
  data-src="https://www.youtube.com/embed/6hgVihWjK2c"
  data-vendor="youtube">
</div>
<div 
  class="lazyframe"
  data-src="https://vimeo.com/45915667"
  data-vendor="vimeo">
</div>
<div 
  class="lazyframe"
  data-src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ8fA1bTmyXEYRYm-tjaLruCI&key=AIzaSyDQxRfx3HQrE0_oTFI2WHzoiGL_CM0JJfQ"
  data-title="Something completely different">
</div>

Initialize the lazyframe.js and done.

lazyframe('.lazyframe');
// or
let elements = document.querySelectorAll('.lazyframe');
lazyframe(elements);

All configuration options. Note that all the options displayed below can also be passed via ‘data’ attributes as you seen in the previous steps.

lazyframe('.lazyframe',{
  // autoplay
  autoplay: true,
  // Value (in milliseconds) for when the update function should run after the user has scrolled
  debounce: 250,
  // Set this to true if you want all api calls and local images to be loaded on page load (instead of when the element is in view).
  lazyload: true
});

Callback functions.

lazyframe('.lazyframe',{
  onLoad: (lazyframe) => console.log(lazyframe),
  onAppend: (iframe) => console.log(iframe),
  onThumbnailLoad: (img) => console.log(img),
});

Changelog:

v2.2.7 (10/17/2021)

• Update

v2.2.6 (10/16/2021)

• Update

v2.2.5 (10/13/2021)

• Bugfix for Youtube

v2.2.4 (04/24/2021)

• Package updated

v2.2.0 (04/23/2021)

• Dropped support for Google API key. All thumbnails and titles come from noembed.com

v2.0.3 (04/23/2021)

• refactor

v2.0.0 (02/22/2021)

• refactor

v1.1.7 (05/28/2018)

• Add support for youtube-nocookie.com