DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
10-12-2014

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 registrados 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, esta compuesta por una URL que luce de la siguiente manera:

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

El parámetro v siempre esta 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

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:


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

MixitUp 3: animaciones y manipulación del DOM

MixitUp 3: animaciones y manipulación del DOM

3D Box Control conTweenMax

3D Box Control conTweenMax

jQuery sharebox, plugin para compartir contenido

jQuery sharebox, plugin para compartir contenido

Algunos artículos que te pueden interesar

¿Cómo mostrar hojas de cálculo de Google Sheets con jQuery?

¿Cómo mostrar hojas de cálculo de Google Sheets con jQuery?

jQuery Sheetrock podemos mostrar los datos de las hojas de cálculo fácilmente en cualquier sitio web.

Andrés Cruz 06-11-2014

Carrusel automático infinito con jQuery y CSS

Carrusel automático infinito con jQuery y CSS

En esta entrada veremos cómo crear un Carrusel automático e infinito con jQuery y un poco de CSS.

Andrés Cruz 27-06-2017

Así funciona serialize en jQuery

Así funciona serialize en jQuery

El método .serialize() provisto por jQuery permite crea una cadena de texto en la notación URL-encoded.

Andrés Cruz 08-08-2013