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

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

by Ravi Singh
2 comments 0 views
How to Load YouTube Video Player On-Demand

Recently, when I was working on this blog to make it load much faster, 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 Load YouTube Video Player On-Demand :

Have you ever noticed Videos embedded onmpatibility-Mode-Microsoft-PowerPoint-Techposts2 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 looks like a video player. Now when you click the “play” icon then it will start loading the Youtube IFRAME player and instantly 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: 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>

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

Copy-paste the following snippet anywhere on 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 the 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 web pages by 400-500 KB and be 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.

2 comments

Jay September 20, 2016 - 5:48 pm

I added both piece of code to my site before the tag. I originally added the 2nd code to my custom CSS but I received a lot of error messages so I moved it to the space before the tag.

I added the youtube id code to my page but nothing shows up.

I’ve added the original code back to my site to show the video since I don’t know how to fix this yet. I would appreciate your help. Thank you.

Reply
Jay September 22, 2016 - 1:13 am

Nevermind. I found another solution. Thanks.

Reply

Leave a Reply

[script_25]

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You may also like

TechPosts Media, A Technology Media Company – All Right Reserved. Designed and Developed by PenciDesign

DigitalOcean Referral Badge

Adblock Detected

Please support us by disabling your AdBlocker extension from your browsers for our website.