You surprised to know that when you embed any YouTube video on your website using standard IFRAME tags, the webpage has to download 0.5 MB of extra resources (CSS, Javascript and images) for rendering the video player and 7-12 additional HTTP requests only adds to slowing down your pages indirectly. Files will also download even visitors on your website has choosen not to watch the video.
The default YouTube embed code isn't responsive. i.e. if people view your website on mobile phone, the video player would not resize itself. The Standard embed video is making your web page heavy and increase overall page loading time due to visitors browser will need to make multiple HTTP requests to render the video player.
The default YouTube embed code isn't responsive. i.e. if people view your website on mobile phone, the video player would not resize itself. The Standard embed video is making your web page heavy and increase overall page loading time due to visitors browser will need to make multiple HTTP requests to render the video player.
Load YouTube Video Player On-Demand
Google Plus uses a technique to reduce the time taken by web page to initially load the YouTube video player. Google Plus displays the thumbnails images of a YouTube video and a "Play" icon is placed over the video. When the user hits the play button, the video thumbnail is replaced with the standard YouTube video player with autoplay set to 1 so it plays the video instantly.
The standard embed code for YouTube looks something like this. You can specify the height of the player (in pixels), the width and the unique ID of the YouTube video.
<iframe width="320" height="180"
src="http://www.youtube.com/embed/LcIytqkbdlo">
</iframe>
src="http://www.youtube.com/embed/LcIytqkbdlo">
</iframe>
Embed YouTube Videos Responsively
Copy and Paste the following snippet anywhere in your web page where you would like the video to appear. Replace the VIDEOID with the actual ID of the YouTube video.
<div class="youtube-container">
<div class="youtube-player" data-id="VIDEOID"></div>
</div>
<div class="youtube-player" data-id="VIDEOID"></div>
</div>
If you want to embed multiple Youtube video on same web page just copy and paste the given code multiple time and replace the VIDEOID with different video.
The JavaScript
This code will scan your pages for embedded YouTube videos. Also add thumbnail image and oneclick event listener.
This code will scan your pages for embedded YouTube videos. Also add thumbnail image and oneclick event listener.
<script>
(function() {
var v = document.getElementsByClassName("youtube-player");
for (var n = 0; n < v.length; n++) {
var p = document.createElement("div");
p.innerHTML = labnolThumb(v[n].dataset.id);
p.onclick = labnolIframe;
v[n].appendChild(p);
}
})();
function labnolThumb(id) {
return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
}
function labnolIframe() {
var iframe = document.createElement("iframe");
iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("id", "youtube-iframe");
this.parentNode.replaceChild(iframe, this);
}
</script>
(function() {
var v = document.getElementsByClassName("youtube-player");
for (var n = 0; n < v.length; n++) {
var p = document.createElement("div");
p.innerHTML = labnolThumb(v[n].dataset.id);
p.onclick = labnolIframe;
v[n].appendChild(p);
}
})();
function labnolThumb(id) {
return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
}
function labnolIframe() {
var iframe = document.createElement("iframe");
iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("id", "youtube-iframe");
this.parentNode.replaceChild(iframe, this);
}
</script>
The CSS
Open the CSS file of your website and paste the following snippet. If you don’t have a separate CSS file, you can also place it before the closing head tag of your web template.
Open the CSS file of your website and paste the following snippet. If you don’t have a separate CSS file, you can also place it before the closing head tag of your web template.
<style>
.youtube-container { display: block; margin: 20px auto; width: 100%; max-width: 600px; }
.youtube-player { display: block; width: 100%; /* assuming that the video has a 16:9 ratio */ padding-bottom: 56.25%; overflow: hidden; position: relative; width: 100%; height: 100%; cursor: hand; cursor: pointer; display: block; }
img.youtube-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; height: auto }
div.play-button { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url("http://i.imgur.com/TxzC70f.png") no-repeat; }
#youtube-iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
</style>
.youtube-container { display: block; margin: 20px auto; width: 100%; max-width: 600px; }
.youtube-player { display: block; width: 100%; /* assuming that the video has a 16:9 ratio */ padding-bottom: 56.25%; overflow: hidden; position: relative; width: 100%; height: 100%; cursor: hand; cursor: pointer; display: block; }
img.youtube-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; height: auto }
div.play-button { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url("http://i.imgur.com/TxzC70f.png") no-repeat; }
#youtube-iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
</style>
This method will reduce the size of your web pages by 300-400 KB and making your site mobile friendly.
