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

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>

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
});

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

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.

See example.html or this CodePen

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