Incluir vídeos de Youtube como fondo de página web

Lo normal es usar una imagen estática como fondo para un sitio web, pero es posible probar con otras alternativas para ofrecer una experiencia nueva y original con la colocación de imágenes en movimiento, como puede ser una animación o un vídeo autoejecutable en el fondo de un sitio web.

La página principal de Bing con frecuencia utiliza fondos de vídeo, como los pingüinos saltando de un agujero en el hielo uno tras otro, y nosotros también podemos hacer lo mismo en nuestro propio sitio web.

Existen varias formas de hacer esto:

Bing utiliza las etiquetas HTML5 estándar para mostrar vídeos en la página principal. El vídeo incrustado tiene un tamaño fijo y no se cambia el tamaño con el navegador.

Hay listas para usar plugins jQuery, Tubular y BigVideo.js por ejemplo, que permiten utilizar fácilmente cualquier vídeo, o una serie de vídeos como fondos de página.

La otra forma más simple que se puede hacer es con etiquetas HTML y CSS (sin JavaScript) para ayudar a colocar cualquier vídeo de YouTube en el fondo de la página.

Vídeo de YouTube como fondo

Para empezar basta con pegar el código de abajo, cerca de la etiqueta de apertura de la plantilla de la web. También debes sustituir el «ID» con el ID del vídeo real de YouTube que deseamos utilizar en el fondo.

     <div style="position: fixed; z-index: -99; width: 100%; height: 100%">
    <iframe frameborder="0" height="100%" width="100%"
    src="https://youtube.com/embed/ID?autoplay=1&controls=0&showinfo=0&autohide=1">
    </iframe>
    </div>
     
    // Reemplaza ID con el código ID de tu vídeo de Youtube 

Internamente, estamos usando las etiquetas IFRAME de YouTube para incrustar el vídeo de forma que ocupa toda la página (tanto en anchura y altura se fija en un 100%). Asimismo, el z-index se establece en negativo, por lo que la capa de vídeo de YouTube aparecerán varios niveles por debajo del contenido principal de la página.

La desventaja es que el vídeo de fondo no funcionará en dispositivos móviles y no es posible silenciar el sonido de un vídeo sin utilizar JavaScript.

Insertar música de fondo con YouTube

Recuerdo la época cuando los sitios web de Geocities automáticamente reproducían música de fondo tan pronto como se abría la página, para vergüenza de los trabajadores de la oficina. Se utiliza sobre todo archivos de audio como MP3, WAV o incluso el formato MIDI, para incorporar música, pero incluso se puede utilizar cualquiera de tus pistas favoritas de YouTube para incrustar el audio de fondo.

El truco es que se incrusta un vídeo de YouTube (con autoplay = 1) y se ajusta la altura y anchura del reproductor de video a cero por lo que permanece invisible. Esto se puede lograr con una sola línea de código que se pueden agregar en cualquier lugar de tu página web.

 <embed height="0" width="0"
    src="http://youtube.googleapis.com/v/VIDEO_ID&autoplay=1&loop=1" />