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

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