Me preguntan por Facebook c?mo poner un video como fondo del blog, es decir, que en lugar de que sea un color o una imagen sea un video. Eso podemos hacerlo gracias al plugin Tubular de jQuery que permite usar un video de YouTube como fondo de una p?gina web.
Aunque el resultado puede ser muy original y atractivo, debo decir que tiene tres inconvenientes: que no se puede silenciar, que si el video tiene anuncios �stos tambi�n se mostrar?n, y que puede hacer muy lenta la carga del blog, as? que si alguien quiere usarlo puede considerar ponerlo s?lo en ocasiones especiales, o en blogs que carguen muy r?pido.
Tambi�n se puede hacer en HTML5, el problema es que con ese m�todo se necesita cargar el video en 3 formatos distintos (.mp4, .webm y .ovg) adem?s de una imagen para los navegadores que no lo soporten, as? que con esta opci?n de YouTube me parece m?s pr?ctica pese a los inconvenientes que tiene.
En este blog de pruebas puedes ver el demo funcionando.
El primer paso es poner justo despu�s de <head> el script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/* jQuery tubular plugin
|* by Sean McCambridge
|* http://www.seanmccambridge.com/tubular
|* Copyright 2012
|* licensed under the MIT License
|* Enjoy.
|*
|* Thanks,
|* Sean */
var videoWidth = 853;
var videoRatio = 16/9;
var defaultDiv = 'wrapper-video';
jQuery.fn.tubular = function(videoId,wrapperId) {
wrapperId = (typeof(wrapperId) == undefined) ? 'wrapper-video' : wrapperId;
t = setTimeout("resizePlayer()",1000);
jQuery('html,body').css('height','100%');
jQuery('body').prepend('<div id="yt-container" style="overflow: hidden; position: fixed; z-index: 1;"><div id="ytapiplayer">You need Flash player 8+ and JavaScript enabled to view this video.</div></div><div id="video-cover" style="position: fixed; width: 100%; height: 100%; z-index: 2;"></div>');
jQuery('#' + wrapperId).css({position: 'relative', 'z-index': 99});
var ytplayer = 0;
var pageWidth = 0;
var pageHeight = 0;
var videoHeight = videoWidth / videoRatio;
var duration;
var iframe = '<iframe id="myytplayer" width="' + videoWidth + '" height="' + videoHeight + '" src="http://www.youtube.com/embed/' + videoId + '?autoplay=1&controls=0&modestbranding=1&showinfo=0&hd=1&iv_load_policy=3&version=3&wmode=transparent&loop=1&playlist=' + videoId + '" frameborder="0" allowfullscreen></iframe>';
jQuery('#ytapiplayer').html(iframe);
jQuery(window).resize(function() {
resizePlayer();
});
return this;
}
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.setPlaybackQuality('medium');
ytplayer.mute();
}
function resizePlayer() {
var newWidth = jQuery(window).width();
var newHeight = jQuery(window).height();
jQuery('#yt-container, #video-cover').width(newWidth).height(newHeight);
if (newHeight > newWidth / videoRatio) {
newWidth = newHeight * videoRatio;
}
jQuery('#myytplayer').width(newWidth).height(newWidth/videoRatio);
}
//]]>
</script>
<script type='text/javascript'>Luego localiza la etiqueta <body>
//<![CDATA[
$().ready(function() {
$('body').tubular('7gZd4b6bXu4','wrapper-video');
});
//]]>
</script>
Si usas una plantilla del Dise?ador de Plantillas entonces busca esta l?nea:
<body expr:class='"loading" + data:blog.mobileClass'>Debajo de cualquiera de ellas dos agrega lo siguiente:
<div id='wrapper-video'>
Luego antes de </body> coloca esta etiqueta de cierre:
</div>
Guarda los cambios y listo. En color rojo debes poner la ID del video de YouTube, la ID son los caracteres que aparecen al final de la URL:
Recuerda: No tiene opci?n de silenciar, as? que si no quisieras que tenga sonido como en el demo del blog de pruebas tendr?s que elegir un video que no tenga sonido. Tambi�n se recomienda usar un video en HD para que no aparezcan partes negras alrededor del video.
Si ya usaras jQuery elimina las otras versiones que tengas para que no se dupliquen y tengas problemas.
Y si usas Scriptaculous o Mootools deber?s aplicar unos cambios a la segunda parte sel primer c?digo que se agrega para que puedas usarlo.
Si ya usaras jQuery elimina las otras versiones que tengas para que no se dupliquen y tengas problemas.
Y si usas Scriptaculous o Mootools deber?s aplicar unos cambios a la segunda parte sel primer c?digo que se agrega para que puedas usarlo.
Autor | jQuery Tubular
No comments:
Post a Comment