Poner video en el fondo de página web con bideo.js

Publicada el por

Librería que permit de forma sencilla, poner un video como fondo en una página web. Veamos cómo poner video en el fondo de página web con Bideo.js

Es muy utilizado en páginas de inicio para intentar impactar al visitante. No hace falta decir que esto le da un protagonismo al video que obliga a que éste sea de buena calidad. Como puede trabajarse con videos de YouTube, el servidor web no sufre y podemos exprimir la calidad que YouTube nos ofrece.

bideojs

Insisto que lo interesante de esta librería es que puedes trabajar con vídeos de YouTube. Esto hace que no debas almacenar el vídeo en tu servidor y, que por lo tanto, lo satures si recibes un pico importante de visitas simultáneas. Aparte, poner un vídeo en tu servidor, puede hacer que consumas todo el tráfico que tienes contratado en tu hosting web.

El ejemplo sería el siguiente:

Código HTML5

<div id="container">
  <video autoplay muted loop>
    <source src="enlace_donde_esta_el_video" type="video/mp4">
  </video>
</div>

Os dejo a continuación, dos artículos que tratan trabajar los vídeos con HTML5:

Código JavaScript

var video = document.querySelector('video')
   , container = document.querySelector('#container');
 var setVideoDimensions = function () {
   var w = video.videoWidth, h = video.videoHeight;
   var videoRatio = (w / h).toFixed(2);
   var containerStyles = window.getComputedStyle(container)
     , minW = parseInt( containerStyles.getPropertyValue('width') )
     , minH = parseInt( containerStyles.getPropertyValue('height') );
   var widthRatio = minW / w, heightRatio = minH / h;
   if (widthRatio > heightRatio) {
     var newWidth = minW;
     var newHeight = Math.ceil( newWidth / videoRatio );
   } else {
     var newHeight = minH;
     var newWidth = Math.ceil( newHeight * videoRatio );
   }
 video.style.width = newWidth + 'px';
   video.style.height = newHeight + 'px';
 };
 video.addEventListener('loadedmetadata', setVideoDimensions, false);
 window.addEventListener('resize', setVideoDimensions, false);

En los enlaces del pie de este contenido, tendréis el código y funcionamiento de éste en CodePen. Visitadlo si queréis más información.

Espero que os sea de utilidad el artículo bideo.js – poner video en el fondo de página web, y que os haya servido para tener esta pequeña librería javascript en vuestro listado de posibles librerías a utilizar.

Más información