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:
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.
No hay comentarios:
Publicar un comentario