Contact
Blog
seo youtube

How to embed YouTube videos avoiding problems on the loading of your page

Posted at 13:29h in SEO by
0 Likes

We have seen in previous occasions how loading speed is a crucial SEO variable that can push back your site from the first positions of SERPs. However, the need of reducing to a minimum a web’s size and the requests made to the server take us to delete elements that could enrich our contents and make them more entertaining for users so that they spend more time on the page. We are talking about YouTube videos.

It is very easy to add videos to a website. There are many on YouTube and they can be customized to adapt them to the format of our site. But when we analyse a webpage that includes videos, we can see some disadvantages: videos are slow and heavy even if we are not providing them directly from our server.

peticiones al insertar vídeos de youtube

Adding YouTube videos does not only increase notably the number of requests made to the server, but it also increases the total size of the page with over 500 kb, which affects considerably the loading speed of the web. Fortunately, there is a way to solve this that can turn all these requests into a single one per video, which decreases the size to about 50 kb. In the following we explain how.

Loading the files from the player when clicking on the video

Each YouTube video includes some preview images that we can export to our site using Javascript. The idea is to replace the original iframe-where the player is hosted-by a preview of the video. Then we will add a button that simulates YouTube’s “play” button.

When a user clicks on “play”, the image will immediately change to YouTube player. This means that the resources are only loaded when the user clicks on the video, not when the page is loaded.

As you can see below, the effect is almost invisible to the user:

See the Pen LkjERp by Agustin (@abaraza) on CodePen.

How to embed YouTube videos on your site using this method

The code is made of 3 parts that we have to add to the webpage where the videos will be played.

HTML

First of all, you have to place that chunk of HTML where the video will be shown. You have to include the unique ID of the YouTube video to be watched under the attribute “data-id”.

<div class="contenedor">
  <div class="reproductor" data-id="QMgSELBA7kw"></div>
</div>

The unique ID comes from the URL that appears when you play the YouTube video:

https://www.youtube.com/watch?v=QMgSELBA7kw

To insert more than one video we have to copy the HTML changing the ID accordingly.

CSS

To give shape and make the video adapted to the browser’s windows we have to add the following styles to our CSS file, or directly on the page using the tags <style></style>:

<style>
.contenedor{
  display: block; 
  margin: 20px auto; 
  width: 100%; 
  max-width: 600px;  
}
.reproductor { 
  display: block; 
  width: 100%; 
  height: 100%; 
  padding-bottom: 56.25%; 
  overflow: hidden; 
  position: relative; 
  cursor: hand; 
  cursor: pointer; 
}
img.imagen-previa { 
   display: block; 
   left: 0; 
   bottom: 0;
   margin: auto; 
   max-width: 100%; 
   width: 100%; 
   position: absolute; 
   right: 0; 
   top: 0; 
   height: auto 
}
div.youtube-play { 
   height: 64px; 
   width: 64px; 
   left: 50%; 
   top: 50%; 
   margin-left: -36px; 
   margin-top: -36px;
   opacity:0.7;
   position: absolute; 
   background:   url("https://cdn2.iconfinder.com/data/icons/social-icons-color/512/youtube-64.png") no-repeat; 
}
div.youtube-play:hover{
   opacity:1; 
}
#youtube-iframe { 
   width: 100%; 
   height: 100%; 
   position: absolute; 
   top: 0; 
   left: 0; 
}
</style>

 

Javascript

Finally, for everything to work, we have to include the following Javascript to the page where the videos will be displayed. We can include it between the tags <script></script> or add it to a JS file that we will grab from the webpage.

<script>
(function() {
    var v = document.getElementsByClassName("reproductor");
    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="imagen-previa" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="youtube-play"></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>
Rate this post

Artículos relacionados

The following two tabs change content below.

Erik Madsen Fortea

Las personas crean contenidos. Los contenidos crean cultura. La cultura se expande a través de los puentes de la traducción.

Latest posts by Erik Madsen Fortea (see all)

Tags:
,