Lazyframe Advanced

a dependency-free library to lazyload iframes and save bandwidth and memory

hero-image shape shape

Why would you use it?

JavaScripts loaded from external providers like YouTube or Vimeo or Google Maps are big and waste precious bandwidth (especially on mobile). This slows down the loading of your website, even if your visitors don't want to see your beautiful videos or embeds.

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

What does it do?

LazyframeAdvanced creates a responsive placeholder (and a placholder image from noembed.com or your custom one) for embedded content and only requests its content and scripts when the user interacts with it.

This decreases the page load and idle time. LazyframeAdvanced comes with brand-like themes for YouTube and Vimeo.

The thumnail placeholder is only loaded when the frame is in view, this saves additional bandwidth.

Examples

YouTube video with thumbnail and title from noembed.com

YouTube video with custom thumbnail image and custom title

Vimeo video with thumbnail and title from noembed.com

Google maps iframe with static placeholder image

Custom iframe with a Surveymonkey form

This video from vimeo has the data-initinview parameter set to to true, so it autoplays, when it enters the viewport

Need Help? Found a bug?

File an issue on GitHub