lazytube - Lazy loading for Youtube Videos

With this script it is possible to load YouTube videos at the click of a button.

Usage

HTML

And embed the YouTube video with a data-src instead of a src attribute and an extra data-poster-Attrbute:

<iframe
    class="lazytube"
    data-poster="./previewImageProxy.php?youtubeid=otCp0CjTX3s"
    data-src="https://www.youtube-nocookie.com/embed/otCp0CjTX3s?autoplay=1"
    frameborder="0"
    allow="autoplay; encrypted-media"
    allowfullscreen
></iframe>

JavaScript

Insert the lazytube.js in before your closing body tag:

<script type="application/javascript" src="lazytube.js"></script>

Then you can create an instance of it:

var myLazytube = new Lazytube();

Optionally, you can pass options:

var myLazytube = new Lazytube({
    selector: '.lazytube',
    hintText: 'My own hint',
    backgroundColor: 'rgba(0, 0, 0, 0.6)',
    textColor: '#fff',
    ownStyles: false
});

Options

For every instance of Lazytube you can pass in some options, to alter its default behaviour. Here's the list of the options.

| Name | Meaning | Default value | | ---- | ----| ---- | | selector | The selector to find the iFrame(s). | .lazytube | | hintText | Der Hinweistext, dass das YouTube-iFrame geladen wird und damit Cookies gesetzt werden | 'To activate the video, click here' | | backgroundColor | The background color of the overlay | rgba(0, 0, 0, 0.6) | | textColor | The text color of the note text. | #ffffff | | ownStyles | Set to true if you want to use your own CSS styles. | false |

Preview image proxy

To not load the preview image directly from YouTube and thus reveal the IP address of the user, you can simply use a small proxy script. Just put the previewImageProxy.php script on your own server and put www.my-domain.com/previewImageProxy.php?youtubeid=MyYYouTubeId as poster path.

Alternatively, you can configure your own web server (e.g. NGINX or Apache) as a proxy for the preview images.

Demo / Example

See example.html or this CodePen

License

This project is licensed under the MIT License - see the LICENSE file for details