How to make embedded YouTube video responsive in WordPress – An Efficient way

Recently, when i was working on making my site faster to load. I came across this trick of making youtube embedded video responsive and decrease the weight of the page. Therefore increasing the site speed.

When you embed YouTube video on your website using standard IFRAME tags, you actually add extra weight to your website or web page. In this way your web page has to download approximately 0.5 MB of extra resources which includes CSS, JavaScript and images for loading the YouTube video player. The flip side is that the files will download even if the visitor has chosen not to watch the YouTube video.

How to make embedded YouTube video responsive - An Efficient way

How to make embedded YouTube video responsive – An Efficient way

How to Load YouTube Video Player On-Demand :

Have you ever noticed Videos embedded in Google+ page? Well, Google Plus actually uses a very simple but clever workaround to reduce the time it takes to load the YouTube video player.  What it does is it displays just the thumbnail images of a YouTube video and a “play” icon which is placed over the video at center so that it look like a video player. Now when you click the “play” icon then it will start loading the Youtube IFRAME player and instanstly starts playing video. Here We will be incorporating the similar approach to embed youtube videos on our site as well. Following video is an example of Youtube Video on Demand :

Instructions to Embed YouTube Videos Responsively :

STEP 1. : The JavaScript

Add this javascript code to the Header or footer file of your Template. This JavaScript does all the magic, it scans your web pages for embedded YouTube videos. If found, it will add the corresponding thumbnail image and “Play” Icon on it.

<script>
(function() {
 var v = document.getElementsByClassName("youtube-player");
 for (var n = 0; n < v.length; n++) {
 var p = document.createElement("div");
 p.innerHTML = techpostsThumb(v[n].dataset.id);
 p.onclick = techpostsIframe;
 v[n].appendChild(p);
 }
})();

function techpostsThumb(id) {
 return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
}

function techpostsIframe() {
 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>

Step 2: CSS :

Open the CSS file of your website and paste the following code snippet in that. If you don’t have a separate CSS file, you can 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: ; display: block; left: ; margin: auto; max-width: 100%; width: 100%; position: absolute; right: ; top: ; 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>

Step 3: Embedding Youtube Video to any Post or Page :

Copy-paste the following snippet anywhere in your web page where you would like the video to appear for eg. inside a ‘Post’ or ‘Page’. Replace VIDEOID with the actual ID of the YouTube video you want to embed. There’s no need to add the height and width since the video will automatically adjust to the space available on device (responsive).

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

Tip : You can copy-paste multiple video blocks on the same page. The code will stay the same except that you need to change the VIDEOID for each of the blocks.

With this way you can easily reduce the size of your webpages by 400-500 KB and keeping your website mobile-friendly.

Tell us what you think and if it worked out for you in the comments below. Also Subscribe us for more such How to Guides on Android, iOS, Windows, Mac and Linux below or Connect with us to stay updated for more on FacebookGoogle+and Twitter.

Get more stuff like this
in your inbox

Enter your Email address to subscribe to this blog and receive notification related to latest Tech updates and New posts directly in your inbox via email.

2 Comments

  1. Jay September 20, 2016
  2. Jay September 22, 2016

Leave a Reply

CommentLuv badge

Get more stuff like this
in your inbox

Enter your Email address to subscribe to this blog and receive notification related to latest Tech updates and New posts directly in your inbox via email.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this. We use cookies to personalise content and ads, to provide social media features and to analyse our traffic.See More Details

Close