If you’ve ever found yourself having to embed a YouTube video (or even worse, many YouTube videos) into any web page, then you know how this seemingly simple operation can be very frustrating, and hindering the user experience. Let’s find out why.

The “classic” method (the one officially provided by YouTube) to embed a video is the usage of the iframe tag.
The code we all know looks something like this:

<iframe src="https://www.youtube.com/embed/ilAJJ3WHg6g" width="420" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

As short and easy to include as it is, you would be surprised to find out how many extra resources are loaded for each single video embedded through this method: between images, CSS and Javascript needed to render the YouTube player the web page must download more or less 400 kb of data even before the user has a way to get to the video – not to mention that he may even decide not to watch it at all.

This translates into an inevitable expansion of the page loading time, especially when there is a need to upload more than one video or even a video gallery. And it is well known that a wait time of more than a second often leads users to leave the page before they have even viewed its content.

The Pingdom tool screen is more eloquent than ever:

Youtube pingdom

Files and resources called via iframe

Another huge problem generated by this type of embedding consists in the fact that the video uploaded via iframe tag is not mobile friendly, as the player will not adapt to the size of the user’s screen – having a fixed height and width, declared in the same iframe tag.
Have you ever tried resizing the browser window after including a YouTube video with this code?
You would soon realize how frustrating it is not being able to watch a video from your smartphone and seeing the page design completely messed up.

It goes without saying that these two problems are indisputably critical in terms of user experience and can really lead to a dizzying increase in bounce rate.
Fortunately, there is a much more effective method of incorporating videos from YouTube, created by Google’s Amit Agarwal: loading them asynchronously only if the user decides to click the play button and making the player totally responsive thanks to a few lines of CSS and javascript.
Let’s see how.

How to upload a YouTube video more efficiently

You have surely noticed that in some websites and social networks YouTube videos are displayed in a slightly different way: it is a workaround that allows you to avoid a direct embed (with the consequent loading of unnecessary resources ) and instead only upload a still image that serves as a preview of the video. The overlay icon of the “play” button makes it look as a player, and clicking on it actually loads the desired video.

Here is an example:

The code to achieve this result is slightly different from the classic one: the video is called up within a responsive div that will make the player mobile friendly, and the iframe will be loaded only when the user clicks on the play button.

1. Code to embed – HTML

The HTML code to be pasted where you want the video to appear is as follows:

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

Where instead of “VIDEOID” the ID of the video you want to upload will be inserted. To get it, just take a look at the video URL: the id is the alphanumeric code that comes immediately after watch?v=.

As you see in the code, a fixed width and height are not established, as they will be calculated automatically through CSS and JS.

2. Javascript

The javascript code must be inserted immediately before the closing of the body of the page.
The function will scan the entire content of the page in search of embed codes for YouTube videos and automatically add the preview image and the onclick event that will actually make the real video appear in autoplay mode.

<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=1&showinfo=1");
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("id", "youtube-iframe");
    this.parentNode.replaceChild(iframe, this);
}
</script>

3. CSS

The last step to achieve the desired result is to include CSS, which will make the image and video perfectly adaptable to the width of the page, in addition to making the “play” button appear above the preview image.
Insert it in your stylesheet, or inline using the style tag.

.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("https://i.imgur.com/TxzC70f.png") no-repeat; 
}

#youtube-iframe { 
width: 100%; 
height: 100%; 
position: absolute; 
top: 0; 
left: 0; 
}

Et voila! Through these three steps you can include any number of YouTube videos you want, by uploading only a very light preview image that will not affect the page loading speed.
Both the image and the iframe loaded after the click will be totally responsive.

How to use this embedding method on WordPress

For those who use WordPress and need to embed a YouTube video in a page or article, this operation may appear more difficult, due to the basic difficulty in including scripts in the WordPress footer.

Fortunately there is a plugin that allows you to do exactly that: OH Add Script Header Footer, specially designed to create a fast and immediate method of adding javascript code only to the desired page or post.
Once installed and activated, just open the WordPress editor on the article that interests us and scroll to the bottom of the page, where you will find a tab like this:
aggiungere script
Paste the script in the footer section, not forgetting to include the script tags, and you’re done.
In this way you will also avoid having to load javascript on all pages of the site, limiting it only to those that contain a YouTube video.