Speed Up Blogger – How To Easily Lazy Load YouTube Videos

Nearly every post now contains a YouTube video. YouTube is one of the largest sources of videos, videos which could be tutorial videos, latest music video or even a movie thriller.

Speed Up Blogger - How To Easily Lazy Load YouTube Videos

This makes embedding videos on a blog easy But then embedding YouTube videos kills the speed of your blog!.

When you embed a YouTube video on your blog, it totally kills the loading speed of your blog. Today I will be showing you how to lazyLoad YouTube video so as to save your precious blog loading speed.

What is Lazy Load?

Lazy Load is a way of loading specific contents after every other content on that blog page have been loaded. By doing so plugins that cause rendering blocking javascript can be eliminated.

One cool feature of this YouTube lazy loader is that it doesn’t even load your video until a visitor clicks play. This will boost up your blog loading speed especially if you have a lot of videos embedded.

How LazyLoad YouTube Videos In Blogger

The Easy Way! – For Absolute Beginners.

If you are afraid of editing your template codes, I have you covered.

Go to Layout >> On the sidebar >> Add New Widget >> select HTML/JavaScript box. Paste the below code inside.

<style>
html{background-color:#f3f3f3}
.wrapper{max-width:680px;margin:60px auto;padding:0 20px}
.youtube{background-color:#000;margin-bottom:30px;position:relative;padding-top:56.25%;overflow:hidden;cursor:pointer}
.youtube img{width:100%;top:-16.82%;left:0;opacity:0.7}
.youtube .play-button{width:90px;height:60px;background-color:#333;box-shadow:0 0 30px rgba( 0,0,0,0.6 );z-index:1;opacity:0.8;border-radius:6px}
.youtube .play-button:before{content:””;border-style:solid;border-width:15px 0 15px 26.0px;border-color:transparent transparent transparent #fff}
.youtube img,.youtube .play-button{cursor:pointer}
.youtube img,.youtube iframe,.youtube .play-button,.youtube .play-button:before{position:absolute}
.youtube .play-button,.youtube .play-button:before{top:50%;left:50%;transform:translate3d( -50%,-50%,0 )}
.youtube iframe{height:100%;width:100%;top:0;left:0}
</style>
<script>
( 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&showinfo=0&autoplay=1″ );
                            this.innerHTML = “”;
                            this.appendChild( iframe );
                } );  
    };
 
} )();
</script>

Save.

Go to step 3 of this post to know how to embed videos.

Advanced Method For Techy Blogger

1. The CSS 

This lazy loading feature for embedding YouTube Videos is styled with CSS and other web development properties. let us install the CSS.

Go to Themes >> Edit HTML >> search for </head>. Paste the below code right above it.

<style>
html{background-color:#f3f3f3}
.wrapper{max-width:680px;margin:60px auto;padding:0 20px}
.youtube{background-color:#000;margin-bottom:30px;position:relative;padding-top:56.25%;overflow:hidden;cursor:pointer}
.youtube img{width:100%;top:-16.82%;left:0;opacity:0.7}
.youtube .play-button{width:90px;height:60px;background-color:#333;box-shadow:0 0 30px rgba( 0,0,0,0.6 );z-index:1;opacity:0.8;border-radius:6px}
.youtube .play-button:before{content:””;border-style:solid;border-width:15px 0 15px 26.0px;border-color:transparent transparent transparent #fff}
.youtube img,.youtube .play-button{cursor:pointer}
.youtube img,.youtube iframe,.youtube .play-button,.youtube .play-button:before{position:absolute}
.youtube .play-button,.youtube .play-button:before{top:50%;left:50%;transform:translate3d( -50%,-50%,0 )}
.youtube iframe{height:100%;width:100%;top:0;left:0}
</style>

2. The JavaScript

Next is to install the JavaScript. Search for </body> using CTRL + F. Paste the below code above it and save.

<script>
( 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&showinfo=0&autoplay=1″ );
                            this.innerHTML = “”;
                            this.appendChild( iframe );
                } );  
    };
 
} )();
</script>

3. Embedding YouTube Video.

Whenever you want to embed a YouTube video anywhere in your blog, use the code below.

<div class=”wrapper”>
    <div class=”youtube” data-embed=”AqcjdkPMPJA”>
        <div class=”play-button”></div>
    </div>
</div>

Replace “AqcjdkPMPJA” with the ID of your YouTube video URL.

Loading speed is very important for your blogger blog because it can help boost your blog SEO while giving your Users a superb browsing experience.

Thanks to Thoriq Firdaus of WebDesign.Tutsplus for discovering and sharing this cool plugin.

If this post helped you, don’t forget to share!.

Related Articles


Leave a Reply