Optimizar videos para páginas web utilizando WordPress

Como ya sabemos, la velocidad de carga para nuestro sitio web es un factor muy importante para el SEO o posicionamiento de nuestra página web en los buscadores. Optimizando los videos de la página web es una buena estrategia, plugins como WP-rocket pueden ayudarte con esta tarea.

En que nos ayudan optimizar nuestros videos

Una razón por la cual insertamos videos en nuestro sitio web, es para aumentar el CTR (Click Through Rate o número de clics que obtiene un enlace respecto a su número de impresiones) y tener videos con contenido colaboran mucho a que esto suceda.

Las optimizaciones de vídeos para WordPress o cualquier tipo de páginas, nos ayudan reducir el mínimo de peso en la web. Las peticiones de nuestro servidor disminuyen al realizar la optimización de los videos teniendo en cuenta que no van a estar con la etiqueta <Iframe> sino con una simple imagen.

Como optimizar mis videos para SEO

Cada video de YouTube trae unas series de imágenes que son predefinidas y que podemos traerlas para nuestro sitio web con JavaScript, la idea del código es sustituir el <Iframe> original donde se encuentra el reproductor completo, por la imagen previa del video, a la que vamos a disimular el botón de Play YouTube.

Cuando el Video le den clic a la imagen será sustituida por el video original de YouTube, por lo que el recurso web será cargado cuando el usuario presione el clic y no cuando se cargue la página web.

Como optimizar videos de mi página web WordPress gratis sin programas

Como optimizar videos de mi página web WordPress gratis sin programas:

HTML

Es lo primero que debemos insertar para que nos salga la imagen de forma video con el atributo “data-id” donde vamos a reemplazar el ID del video de YouTube.

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

El ID lo obtenemos de YouTube como se muestra el siguiente ejemplo

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

Para insertar más de un video solo podemos insertar el HTML mencionado anteriormente cambiando el ID de cada video.

CSS:

Para darle los estilos al video y poder realizar el responsive debemos añadir los siguientes CSS usando las etiquetas <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://www.fullfreelancer.com/assets/img/aaaaaaaaaaaaaaaaaa.png) no-repeat;
}
div.youtube-play:hover{
   opacity:1; 
}
#youtube-iframe { 
   width: 100%; 
   height: 100%; 
   position: absolute; 
   top: 0; 
   left: 0; 
}
</style>

JAVASCRIPT:

Añadimos el JS en cualquier si es necesario recomendamos en el footer de la web con las etiquetas <script></script> Esto es lo más importante y necesario para que funcione y se visualice el video en nuestro sitio web.

<script>
window.onload =function(){
(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>