# lazyvids

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

Latest version **0.2.3** (published 2022-02-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install lazyvids
pnpm add lazyvids
yarn add lazyvids
bun add lazyvids
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.3 |
| Published | 2022-02-03 |
| First published | 2021-03-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | isAdrisal |
| Maintainers | isadrisal |

## Links

- npm: https://www.npmjs.com/package/lazyvids
- Repository: https://github.com/isAdrisal/lazyvids.js
- Homepage: https://github.com/isAdrisal/lazyvids.js#readme
- Issues: https://github.com/isAdrisal/lazyvids.js/issues
- npm.io page: https://npm.io/package/lazyvids

## Recent versions

- 0.2.3 (latest) — 2022-02-03
- 0.2.2 — 2022-01-30
- 0.2.1 — 2021-09-04
- 0.1.0 — 2021-03-19
- 0.0.5 — 2021-03-18
- 0.0.4 — 2021-03-18
- 0.0.3 — 2021-03-17
- 0.0.2 — 2021-03-17
- 0.0.1 — 2021-03-17

## README

# lazyvids.js

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

## Installation

Install using your favourite package manager.

```shell
$ yarn add lazyvids
```

Import into your project.

```js
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.

```html
<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.

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

| **Option** | **Type** | **Default Value** | **Description** |
| :-: | :-: | :-: | :-- |
| `logLevel` | `string` | `silent` | Set logging level: `verbose`, `warn`, `silent`. |
| `ignoreHidden` | `boolean` | `false` | Set whether to skip `<video>` elements with `display: hidden`. |
| `minBandwidth` | `number` | `0` | If `reduceData` is `true`, set threshold above which videos will play. |
| `reduceData` | `boolean` | `false` | If `true`, will not play videos if data saver is enabled or bandwidth is below `minBandwidth`. |

---
_Source: https://npm.io/package/lazyvids · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._