Author: | viktorbergehall |
---|---|
Views Total: | 1,258 views |
Official Page: | Go to website |
Last Update: | October 17, 2021 |
License: | MIT |
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
Thank you very much this script is very useful for my website.
Amazing, it’s really helpfull my brother