Blog sobre Accesibilidad Web, diseño Web, SEO y recursos gratis en la Web

lunes, 10 de enero de 2011

Como agregar un video en background con jQuery

Como agregar un video en background con jQuery

Tubular es un projecto de Sean Mc Cambridge Design alojado en Google Code. Se trata de una librería en jQuery que permite insertar cualquier video de YouTube como fondo de cualquier página Web.

Sólo requiere que del lado del cliente esté instalado Flash y Javascript habilitado.
Para la instalación, sóo seguir los siguientes pasos:

Leer jQuery en la página
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>


—Sólo recordar que luego del 31/01/01 jQuery no permitirá hacer más hotlink

Aunque tradicionalmente los scripts son llamados en el HEAD de la página; comienza a ser una buena práctica llamar a Javascript antes del cierre de la etiqueta BODY

Cargar swfobject
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>

Cargar el plugin
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.js"></script>

Ejecutar el script
$('body').tubular('_VKW_M_uVjw','wrapper');

Donde _VKW_M_uVjw es el ID del video de YouTube y wraper es en el ejemplo el nombre del DIV

Sitio Web | Tubular
Demo | Tubular
Licencia | MIT
Share:

Publicidad

Estadísticas