0.2.1 • Published 6 years ago

lazytube v0.2.1

Weekly downloads
1
License
MIT
Repository
github
Last release
6 years ago

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.

NameMeaningDefault value
selectorThe selector to find the iFrame(s)..lazytube
hintTextDer Hinweistext, dass das YouTube-iFrame geladen wird und damit Cookies gesetzt werden'To activate the video, click here'
backgroundColorThe background color of the overlayrgba(0, 0, 0, 0.6)
textColorThe text color of the note text.#ffffff
ownStylesSet 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