Vide es, probablemente, la forma más sencilla de incluir un video como fondo en tu sitio web. La biblioteca se escribió utilizando jQuery como framework JavaScript y su instalación no demora más que unos pocos minutos.
Como principal ventaja de este recurso, ademas de su facilidad de uso, esta su peso: apenas 3kb en su versión simplificada. Además funciona en todos los navegadores modernos, si hablamos de Internet Explorer su soporte comienza en la versión 9. Funciona perfectamente en la mayoría de los dispositivos móviles, sin embargo existen algunas versiones en los que el plugin se deshabita para evitar cualquier problema de incompatibilidad.
Otro detalle importante es que además del video podemos incluir una imagen, la misma será mostrada mientras se realiza la carga del archivo de video, evitando así una mala experiencia del usuario.
Para hacer funcionar un video de fondo simplemente debemos agregar la etiqueta data-vide-bg en en la caja en donde queremos visualizar el resultado:
<div style="width: 1000px; height: 500px;" data-vide-bg="path/to/video" data-vide-options="loop: false, muted: false, position: 0% 0%"> </div>
En el ejemplo pueden notar el uso de la etiqueta data-vide-options, aquí es donde se indican las opciones de reproducción. Estas opciones también se pueden configurar al momento de iniciar el plugin.
Las opciones disponibles y sus valores por defecto son:
$("#yourElement").vide({ volume: 1, playbackRate: 1, muted: true, loop: true, autoplay: true, position: "50% 50%" });
Como pueden ver, utilizar este proyecto es sumamente sencillo.
Vide es un proyecto liberado bajo licencia MIT para su libre utilización.
Alternativas:
