AyudaBloggers{...}
Insertar vídeo de Youtube como fondo para tu web con jquery.tubular.js




Hello World Bloggers! En esta ocasión les compartiré una forma de insertar vídeos de Youtube como fondo en sus sitios. Se recomienda usarlo de forma astuta, original y creativa. Ya que no es la idea ahogar a nuestros visitantes con tanto recursos o cosas moviéndose.

Pero antes de todo me gustaría tal y como lo prometí, mencionar a la primera persona que respondio en mi presentacion como autor nuevo.

La persona fue Emilio Cobos Álvarez, también muy reconocido por su blog. la pregunta era:
"A que me refería exactamente con "LARGA VIDA A <!DOCTYPE html>" 

Su respuesta fue:
<!DOCTYPE html> es el doctype propuesto para HTML5, y que hace funcionar a los navegadores modernos en el modo estándar. Se podría decir que representa los estándares web, cosa que todos adoramos ^^.

Emilio tambien es un gran bloggero y les recomiendo su blog para que lo puedan seguir:

http://emiliocobos.net/



Cómo insertar vídeos de Youtube en nuestros blogs con Tubular.



Primero: Descargar Tubular desde su web oficial:

Descargar Tubular desde su pagina oficial, tambien podrán verlo en funcionamiento:  Web Oficial / Descargar

Segundo: Descomprimir lo descargado y seleccionar archivos a ocupar:

Descomprimen el archivo y buscan la carpeta "js". Sólo usaremos los script llamados "jquery.tubular.js" , "mission-control.js".

Nota: También necesitaremos Instalar jQuery y swfobject.js

Tercero: Agregar y editar el Script : Para dar a conocer al Script el vídeo a mostrar:

Si gustan pueden abrir el archivo "mission-control.js" con algún editor de código para agregar el vídeo a mostrar, pero les are el mundo mas fácil colocando el código del Script que deben pegarlo y antes de </head>

Atento con lo que esta en Negrita.

<script type='text/javascript'>
$().ready(function() {
$('body').tubular('_VKW_M_uVjw','wrapper');
$('#videoPause').click(function() {
if ($(this).hasClass('videoPaused')) {
ytplayer.playVideo();
$(this).removeClass('videoPaused');
} else {
ytplayer.pauseVideo();
$(this).addClass('videoPaused');
}
return false;
});
$('#videoMute').click(function() {
if ($(this).hasClass('videoMute')) {
ytplayer.mute();
$(this).removeClass('videoMute');
} else {
ytplayer.unMute();
$(this).addClass('videoMute');
}
return false;
});
$('#videoStop').click(function() {
ytplayer.stopVideo();
ytplayer.clearVideo();
$('#yt-container').hide();
return false;
});
});
</script>

Lo marcado en negrita es el ID del vídeo para ser identificado en Youtube, es el que deben cambiar por su vídeo a gusto:

http://www.youtube.com/watch?v=_VKW_M_uVjw

El ID del vídeo de arriba es: _VKW_M_uVjw

También pueden toparse con link de este tipo:

 http://www.youtube.com/watch?v=GMxXHY1f8Xk&feature=related

Lo que esta en negrita, despues de = y antes de & es el ID.

Entonces solo debemos seleccionar el vídeo a gusto, copiar el ID de tal vídeo y reemplazarlo por el que esta por defecto en el código.

También debemos agregar los Script faltantes antes de </head> y dar a vista previa, si todo esta bien guardar:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js' type='text/javascript'/>
<script src='http://archivos.ayuda-bloggers.info/upload/jquery.tubular.js' type='text/javascript'/>


Y sencillamente con lo anterior ya podremos ver como fondo un vídeo de youtube en nuestra web solo usen creatividad y que les quede muy cool!

A continuación les comparto una demo, con un corto de una productora amiga y cercana llamada Nexumbox así que aprovecho de mencionarlos.


DEMO

Escrito por
Davis Drumkey

Amante de la web, el mundo tecnológico, Linux, hacking ético forever. Soy estudiante de Ing. en conectividad y redes, telecomunicaciones.

También baterista hace 8 años.

tweet

Blogroll de Ayuda Bloggers