¿Cómo colocar vídeos responsive de Youtube como fondo (Background) con jQuery/CSS?

Ver ejemplo Descargar

Muchas veces queremos agregar algún recurso a un sitio web permite resaltar de alguna manera de los demás y por lo tanto lograr al final un diseño que sea original y atractivo; en esta entrada conoceremos un recurso que nos ayudará en esta tarea, el mismo permite colocar videos almacenados en YouTube como fondo (Background) en una página web a través de un plugin para jQuery.

Instalación del plugin jQuery.YoutubeBackground

El plugin jQuery.YoutubeBackground permite colocar videos como fondo; su funcionamiento es muy sencillo:

Primero instalamos el plugin disponible en el enlace anterior (JavaScript y CSS) junto con una versión de jQuery:

<link rel="stylesheet" href="style.css">
<script src="jquery.min.js"></script>
<script src="jquery.youtubebackground.js"></script>

Aplicamos el plugin sobre nuestra página web indicando el identificador del video de YouTube usando el parámetro videoId dentro de la función YTPlayer:

$('#video').YTPlayer({ 
  fitToBackground: true, 
  videoId: 'LSmgKRx5pBo'
});

Identificador del video de YouTube

La URL para acceder a cualquier vídeo de YouTube, está compuesta por una URL que luce de la siguiente manera:

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

El parámetro v siempre está presente y su valor permite identificar unívocamente todos y cada uno de los videos de YouTube (videoId) y por ende es el único valor que varía en la URL es la cadena de texto que se encuentra luego del parámetro v.

Opciones del plugin jQuery.YoutubeBackground

• ratio: Indica la relación de aspecto (16/9 por defecto) del video.
• videoId: Identificador del video.
• mute: Booleano que indica si silencia el video (true) o no (false).
• repeat: Booleano que indica si debe de repetirse el video a su finalización
• fitToBackground: Ajusta al fondo el video seleccionado.

Algunas desventajas de colocar videos como fondo

Hay una serie de desventajas que se pueden presentar cuando intentamos agregar videos como fondo en un sitio web, entre los principales tenemos:

• El principal inconveniente como podrás imaginarte es que ralentiza el sitio web; en otras palabras hace más lento el proceso de carga del sitio web.
• Además, si el video tiene anuncios, no podrás eliminarlos lo que puede convertirse en una molestia.

Ver ejemplo Descargar

Extra: Colocando un video de YouTube de background con CSS

Si tu sitio no usar jQuery puedes probar esta otra solución, como casi todo en la web, podemos hacer cosas similares que hacemos empleando JavaScript pero con CSS, de manera más sencilla, pero generalmente menos potente, aunque este no es el caso; con las siguiente líneas de código CSS:

.container_video_background {
  position: fixed; 
  z-index: -99; 
  width: 100%; 
  height: 100%;
}

Y el HTML es solo el video con la clase anteriormente referenciada:

<iframe frameborder="0" height="100%" width="100%"  class="container_video_background" src="https://youtube.com/embed/TU_ID_VIDEO?autoplay=1&controls=0&showinfo=0&autohide=1"> </iframe>

Aparte, de referenciar la clase, es importante que coloques que tenga el autoplay, además de que no muestre los controles empleando los atributos que están en la URL; otro punto importante es que en el token de la URL que dice TU_ID_VIDEO va el ID del vídeo de YouTube que quieras mostrar en en fondo o background; además, el CSS usa la regla junto con el valor de z-index: -99 para garantizar que quede al fondo de tofo tu contenido; por último ocupa todo el tamaño de la ventana con definiendo los atributos width y height con 100% más el position: fixed que permite establecer el fondo en un área siempre visible.

Extra:Colocando un video de YouTube de background pero solo sonido

En vez de emplear el iframe que es a la final una ventana que muestra contenido, en este caso un vídeo de YouTube, si solo queremos reproducir audio de YouTube y no vídeo, podemos emplear la etiqueta embed como hacemos a continuación, en la cual le definimos un atributo loop para que se repita infinitamente el audio del vídeo y otro para que arranque al cargar la web:

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

Todos los ejemplos que vimos anteriormente son responsive, lo que significa que se adapta al tamaño de la pantalla, ocultando ciertas partes del vídeo según amerite.