lazyvids

lazyvids.js

A small utility to lazy-load autoplay HTML5 videos once they enter the viewport.

Installation

Install using your favourite package manager.

$ yarn add lazyvids

Import into your project.

import 'lazyvids';

Usage

lazyvids.js works by setting attributes on HTML5 video elements, and playing the videos once they are scrolled into view.

1. Add a [data-lazyvids] attribute to <video> elements that you want to lazy-play.

2. Add preload="none" to the <video> to prevent the browser from downloading it when out of view. preload="metadata" is preferred, but does not work as it should in Safari ().

3. It's best practice to also include muted and playsinline attributes, but the library will add them by default.

4. Provide the <video> with a poster image attribute.

<video
  data-lazyvids
  muted
  playsinline
  preload="none"
  poster="poster.jpg"
  src="example.mp4"
></video>

<video data-lazyvids muted playsinline preload="none" poster="poster.jpg">
  <source src="example.webm" type="video/webm" />
  <source src="example.mp4" type="video/mp4" />
</video>

Options

Configuration options are available using a lazyvidsConfig object on the global window object.

<script>
  window.lazyvidsConfig = lazyvidsConfig || {};
  lazyvidsConfig = {
    logLevel: 'silent',
    ignoreHidden: false,
    minBandwidth: 0,
    reduceData: false,
  };
</script>