Load YouTube Video Dynamically

YouTube provides video embedding feature to web page by using simple HTML iframe tag, which is very easy process for everyone. However embedding a YouTube video player while page loading slow down a web page's load performance especially if there are more than one videos embedded on the same page.

Embedding videos in iframe completely loads a new page within the iframe includes HTML, stylesheet, JavaScript files, images etc, which increase HTTP requests on initial page load and increase page load time.

Instead of embedding a YouTube video directly while on page loads, we are going to load the video player when the user ask to do this. In simple words we are going to load resources dynamically which is also called as lazy loading.

let's get started.

HTML Structure

We are using two HTML div elements. The first div will be used to wrap around embedded YouTube video, and the second div is nested which will be used to create shape of video Play button.

<!-- wrapper -->
<div class="vplayer" data-v="J1yoQAdHuu0"> 
 
 <!-- play btn -->
 <div class="plybtn"></div> 
 
</div>

• data-v attribute will be used to specify YouTube video ID.
• class=youtube attribute will be used to identify video embeds.

CSS

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

• CSS is used to design video player aspect ratio at 16:9.
• Formatting second div for play button design.
• define YouTube video thumbnail position.

Output:

Adding JavaScript

Use of JavaScript is required to display video thumbnails, embed and play YouTube videos.

( function() {

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

    for (var i = 0; i < vplayer.length; i++) {
        console.log(vplayer[i].dataset.v);
        var source = "https://img.youtube.com/vi/"+ vplayer[i].dataset.v +"/sddefault.jpg";
        
        var image = new Image();
                image.src = source;
                image.addEventListener( "load", function() {
                    vplayer[ i ].appendChild( image );
                }( i ) );
        
                vplayer[i].addEventListener( "click", function() {

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

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

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

Final Output:

[hoops name="pageScript"]