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

InstaStream: plugin para mostrar imágenes desde Instagram

InstaStream: plugin para mostrar imágenes desde Instagram

3D Box Control conTweenMax

3D Box Control conTweenMax

Slick: el carrusel para jQuery

Slick: el carrusel para jQuery

Algunos artículos que te pueden interesar

Las etiquetas video y audio para multimedia en HTML

Las etiquetas video y audio para multimedia en HTML

En esta entrada hablaremos de las etiquetas vídeo y audio que permiten mostrar contenido multimedia a nuestra web mediante vídeos y audios de distintos formatos.

Andrés Cruz 18-06-2015

Cómo incrustar un video de Youtube en Android

Cómo incrustar un video de Youtube en Android

Se explica cómo incrustar un video de Youtube en una aplicación Android empleando la API nativa de Youtube creada por Google.

Andrés Cruz 20-10-2016

¿Cómo Rotar Imágenes u otros elementos HTML con jQuery?

¿Cómo Rotar Imágenes u otros elementos HTML con jQuery?

En esta entrada veremos como podemos rotar una imagen empleando un plugin de jQuery.

Andrés Cruz 29-07-2014