Embed Responsive YouTube Video On Blog Without Increasing Page Loading Time Tutorial

Find out how to embed YouTube video clip on your website/blog with reduced loading time and the clip is responsive to mobile phones as well.

Normally we just copied the embed code provided directly from YouTube and paste it on our blog posts.

The only thing is we just adjust the width and the height of the video player.

Now here is a better way to embed YouTube video on your website or blog. 

You just embed the thumbnail image of a YouTube video on your site.

The video player is loaded only when your reader clicks on the thumbnail.

By doing this way, you can save a huge amount of byte size of your web pages.

Especially for most of you who are using shared hosting account (WordPress). 

Note: Originally, there are two embedded YouTube videos here to illustrate this tutorial.

But I have already removed the two YouTube videos on this blog post.

The reason why I have them removed is because, it is against Adsense policy to embed YouTube video on this site.

If I have embedded the video clips here, you would NOT see any Adsense ad on this page.

Sorry, folks.

Anyway, I will just use visuals to illustrate this tutorial.

This first video visual below is the one embedded in the normal method using YouTube code provided.

This second visual below of the same video is embedded with the new method as explain below.

When you click on the red color play button, the thumbnail image will change to the YouTube video player, which is set in auto-play mode.

It means, the video will  play instantly.

Lighter and Responsive YouTube Clips

This method you don't have to specify the player size any more.

You are now embedding the responsive video player right away.

 There are three (3) main steps:

Step One:

1. Copy and paste the following code in your web page where you want the YouTube video to appear.

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

Note: You need to replace VIDEO_ID with the actual ID of the YouTube video which you want to paste.

2. The YouTube video ID is found in the URL ( address bar ) of the video.

3. For example the video URL is: https://www.youtube.com/watch?v=OJPYeZGHCa4. Then the video ID is : OJPYeZGHCa4.

4. Now you don't need to state the height and width anymore. The video player will fix automatically accordingly.

5. If you have a few videos on the same page, then you paste different DIV blocks with different video IDs.

Step Two:

1. Paste the JavaScript as provided below, on any of your WordPress template. (Header.php, Footer.php. etc.)

2. For Blogger, you need to go to "Layout".  Click "Add a gadget".

3. Select and click "HTML/Javascript". Then paste the code inside the "Content" box.

4. Finally click "Save" button. 

<script>
    
        /* Reduce Loading Time YouTube Embeds */

     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 = digiztalThumb(v[n].dataset.id);
                    div.onclick = digiztalIframe;
                    v[n].appendChild(div);
                }
            });
    
        function digiztalThumb(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 digiztalIframe() {
            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>

 Step Three:

1. Finally paste the CSS code as provide below before the closing head tag  (</head>) of your blog/web template.

1. For Blogger, go to "Theme".

2. Click on "Edit HTML".

3. Then find </head>. Paste  the following code before </head>.

4. Click the "Save template" button.

  <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/fCMZZpQ.png") no-repeat;
            cursor: pointer;
        }
   
    </style>

This method will reduce the loading time of your web pages and at the same time the video clip is automatically mobile-friendly.

Note: For those of you who installed Autoptimize plugin in your WordPress, then this tip will not work properly.

You won't see the red box with white triangle play button on the video image.

When you click on the image, it will play, and the YouTube player reduces its size.

If you still want to use this hack, you need to disable Autoptimize plugin.