How to embed YouTube Video without increasing web loading time?

It is very easy to embed a YouTube video. If you play video on Direct YouTube's official site then an embed option will be available, you can embed the YouTube video from there. When you embed the video, its weight is 500+ Kb. Thereby increasing the load of web page increases. In this article, we will talk to you about how to embed YouTube videos that reduce web page load limitation.

Why embed video enhances the loading time of your web page.

Embedded video not only increases the byte size of your web pages but the browser has to request multiple HTTP requests to present the video player. This increases your page's overall loading time.

Embed YouTube video without increasing page size

When you share YouTube videos in Google Plus, there is no real video player. There Google Plus just shows the thumbnail image of the YouTube video. Google Plus simply embeds the thumbnail image of YouTube video, And the actual video is loaded only when the user clicks on the thumbnail manually.The thumbnail image of the YouTube video is about 15Kb and the embedded video is 500+ Kb. That's why we can embed YouTube videos in less than 15kb bytes.

Demo :-

You can see in the demo, The embedded video of YouTube (iframe) took longer to load And the embedded video from this method immediately loaded.

3 STEPS TO EMBED YOUTUBE VIDEOS RESPONSIVELY

Step-1 Paste the code in your webpage where you want to show YouTube video. After pasting, paste the id of the YouTube video in place of 'video id' which you want to show on YouTube video.

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

Step-2 After that copy the following JavaScript and paste it into the web template.

<script>

/* Web: http://trylity.blogspot.com */

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 labnolThumb(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 labnolIframe() {

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-3 Finally copy the CSS code below and Go to the web templates and paste it before the </ head> tag.

<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>

Using this method, you can increase the speed of your webpage, Together you can give YouTube video a new look.
I hope you liked this article, please share it And if you have any questions related to it, then comment.