# youtube-lazyload

> Lazy load youtube video

Latest version **1.1.1** (published 2020-12-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install youtube-lazyload
pnpm add youtube-lazyload
yarn add youtube-lazyload
bun add youtube-lazyload
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2020-12-12 |
| First published | 2019-04-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Sambhu Raj Singh |
| Maintainers | rajsamb |
| Keywords | Lazyload, Youtube, Video |

## Links

- npm: https://www.npmjs.com/package/youtube-lazyload
- Repository: https://github.com/rajsamb/youtube-lazyload
- Homepage: https://github.com/rajsamb/youtube-lazyload#readme
- Issues: https://github.com/rajsamb/youtube-lazyload/issues
- npm.io page: https://npm.io/package/youtube-lazyload

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.1.1 (latest) — 2020-12-12
- 1.1.0 — 2019-04-05
- 1.0.1 — 2019-04-04
- 1.0.0 — 2019-04-04

## README

# Lazyload Youtube video

  Install this package and lazy load all the youtube video with the class "youtube". Ideal for loading the site quickly.

## How to Use

1. npm install youtube-lazyload

2. On HTML use following code:

    ```
    <div class="wrapper">
        <div class="youtube" data-embed="EQW3n5aGdSI">
            <div class="play-button"></div>
        </div>
    </div>
    ```

    Note: 

    Value of the data-embed is the id of the youtube video. For e.g.

    if the youtube link is: https://www.youtube.com/embed/EQW3n5aGdSI

    then, the data-embed is : EQW3n5aGdSI


    To allow fullscreen, add attribute <code>data-fullscreen="true"</code>. For e.g. 

    ```
    <div class="wrapper">
        <div class="youtube" data-embed="EQW3n5aGdSI" data-fullscreen="true">
            <div class="play-button"></div>
        </div>
    </div>
    ```

    To disable fullscreen, either remove attribute "data-fullscreen" or set it to false <code>data-fullscreen="false"</code>

3.  Use the following style:

    <pre>

    .wrapper {
        max-width: 680px;
        margin: 60px auto;
        padding: 0 20px;
    }

    .youtube {
        background-color: #000;
        margin-bottom: 30px;
        position: relative;
        padding-top: 56.25%;
        overflow: hidden;
        cursor: pointer;
    }
    .youtube img {
        width: 100%;
        top: -16.82%;
        left: 0;
        opacity: 0.96;
    }
    .youtube .play-button {
        width: 90px;
        height: 60px;
        background-color: #333;
        box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
        z-index: 1;
        opacity: 0.8;
        border-radius: 6px;
    }
    .youtube .play-button:before {
        content: "";
        border-style: solid;
        border-width: 15px 0 15px 26.0px;
        border-color: transparent transparent transparent #fff;
    }
    .youtube img,
    .youtube .play-button {
        cursor: pointer;
    }
    .youtube img,
    .youtube iframe,
    .youtube .play-button,
    .youtube .play-button:before {
        position: absolute;
    }
    .youtube .play-button,
    .youtube .play-button:before {
        top: 50%;
        left: 50%;
        transform: translate3d( -50%, -50%, 0 );
    }
    .youtube iframe {
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
    }

    </pre>


##  Source

<p>This is the exact copy of the code by <a href="https://codepen.io/tutsplus/">https://codepen.io/tutsplus/</a>. The working example is available
on the <a href="https://codepen.io/tutsplus/pen/RRVRro">Codepen</a>.</p>

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