How to “Lazy Load” Embedded Multiple YouTube Videos with Video title

Question

I want to implement “Lazy Load” Embedded Multiple YouTube Videos With You tube video title.I want load only the video image thumbnail with youtube video title in the beginning and when user clicks on it then only load video.I have one code for this but in this code only youtube video image is showing on the first load not showing the video title on the image.How to show the title on the youtube video image.Below is My code.

<script type="text/javascript">
jQuery(document).ready(function($) {
 ( function() {

    var youtube = document.querySelectorAll( ".youtube" );

    for (var i = 0; i < youtube.length; i++) {

        var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";

        var image = new Image();
                image.src = source;
                image.addEventListener( "load", function() {
                    youtube[ i ].appendChild( image );
                }( i ) );

                youtube[i].addEventListener( "click", function() {

                    var iframe = document.createElement( "iframe" );

                            iframe.setAttribute( "frameborder", "0" );
                            iframe.setAttribute( "allowfullscreen", "" );
                            iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&autoplay=1" );

                            this.innerHTML = "";
                            this.appendChild( iframe );
                } );    
    };

} )();
});
</script>

Lovntola Lovntola · Accepted Answer · 2018-02-02T17:48:33

You can only take the name from the video and other data via the YouTube API with a API-Key. With this key you can parse the Youtube-API for example the name, via javascript, php or what your preferred language is to parse the json request.
The .title ist the name of the video.

Here is a project on Github for Youtube, Google Maps and Vimeo Videos: https://github.com/viktorbergehall/lazyframe

How to “Lazy Load” Embedded Multiple YouTube Videos with Video title

1 Answers