How to Embed YouTube Videos Without Effecting Blog Load Time

Embedding videos on your blog posts will increase the value for your post and user will stay on your website for a long time which indirectly reduces your blog bounce rate.

There are various advantages if embedding YouTube videos on your articles. The user will able to understand the post more clearly.

So apart from various advantages we get from embedding YouTube videos, we also have a drawback of embedding YouTube videos.

When you embed a YouTube video code (Iframe) on your blog post then that will directly increase your page size (upto 0.5 MB) and increase your blog load time.

So it overall effects the user experience (UX) and the visitor may leave your website and may visit your competitor site.

The YouTube video which you embed will not be responsive.

So here I will explain how to embed YouTube videos efficiently and make it responsive.

Load YouTube Video on Demand

The only thing we can do is to load the YouTube whenever needed (On-Demand).

So how to do this?

It is very simple, instead of embedding the entire video player which increase the blog load time we need to just use Google plus which cleverly replaces the video player with the video thumbnail and a play icon which is placed on the video thumbnail.

By doing this you can load the YouTube video player only when you click on play icon.

This ultimately reduces the size of the page on your blog and the page loads faster.

<iframe width="320" height="180" 
    src="//www.youtube.com/embed/LcIytqkbdlo">
</iframe>

Embed YouTube Videos Responsively without Increasing Load Time

The following is the example of the video which will load only when you click on play icon

I already told you that the video is loaded and played automatically only after the user clicks on the play icon placed on the thumbnail.

What happens when the user clicks the lay icon is it will replace the thumbnail with the video which is having attribute autoplay=”1” which makes the video to play on loading the video.

All the attributes and video player related files are not loaded until the play icon is clicked by the user.

So here I’m going to explain to you how to embed YouTube videos which load on demand and make them responsive

<div class="youtube-container">
    <div class="youtube-player" data-id="VIDEOID">
    </div>
</div>

Add the above code anywhere where you like to embed the video and replace the VIDEOID with your required video id.

Now add the following CSS to your website.

<style>
    .youtube-player {
        position: relative;
        padding-bottom: 56.23%;
        /* Use 75% for 4:3 videos */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background: #000;
        margin: 5px;
    }
    
    .youtube-player iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: transparent;
    }
    
    .youtube-player img {
        bottom: 0;
        display: block;
        left: 0;
        margin: auto;
        max-width: 100%;
        width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        border: none;
        height: auto;
        cursor: pointer;
        -webkit-transition: .4s all;
        -moz-transition: .4s all;
        transition: .4s all;
    }
    
    .youtube-player img:hover {
        -webkit-filter: brightness(75%);
    }
    
    .youtube-player .play {
        height: 72px;
        width: 72px;
        left: 50%;
        top: 50%;
        margin-left: -36px;
        margin-top: -36px;
        position: absolute;
        background: url("//i.imgur.com/TxzC70f.png") no-repeat;
        cursor: pointer;
    }
</style>

For WordPress, just remove paste the CSS snippet in the style.css file and save.

Note: For WordPress blogs, you need to remove :not(.post-body) as it is added in order to remove some CSS overriding issues on blogger or you can place the code as it is.

If you are on blogger just find the following tag using ctrl+f

<b>]]></b:skin></b>

and paste the above code above this tag.

Now copy the following javascript code and paste in your template above </head> tag or above </body> tag. If you are using blogger you need to convert this code using any HTML converter and paste above </body> tag.

<script>
    document.addEventListener("DOMContentLoaded",
        function() {
            var div, n,
                v = document.getElementsByClassName("youtube-player");
            for (n = 0; n < v.length; n++) {
                div = document.createElement("div");
                div.setAttribute("data-id", v[n].dataset.id);
                div.innerHTML = labnolThumb(v[n].dataset.id);
                div.onclick = labnolIframe;
                v[n].appendChild(div);
            }
        });

    function tricksladderThumb(id) {
        var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
            play = '<div class="play"></div>';
        return thumb.replace("ID", id) + play;
    }

    function tricksladderIframe() {
        var iframe = document.createElement("iframe");
        var embed = "https://www.youtube.com/embed/ID?autoplay=1";
        iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
        iframe.setAttribute("frameborder", "0");
        iframe.setAttribute("allowfullscreen", "1");
        this.parentNode.replaceChild(iframe, this);
    }

</script>

Finally, save your template