Una de las preguntas mas frecuentes por los bloggeros es ¿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 el 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.
Solo como una sugerencia recuerda siempre, antes de editar la plantilla de tu blog descargar una copia de seguridad por cualquier inconveniente.
Bueno, sin mas que decir aqui estan los pasos a seguir:
1. Haz click en la Opcion "Plantilla" que esta en el panel de control de tu Blog de google
2. Por Seguridad, haz click en la opcion "Crear/Restablecer Copia de Seguridad" y luego en "Descargar Plantilla Completa", si las cosas salen mal al final, y tu blog presenta problemas puedes subir este Archivo nuevamente para que tu blog siga tal como estaba
3. Luego cierra esa ventana y haz click donde dice "Editar HTML"
4. Haz Click dentro del Editor HTML de la plantilla y presiona "Ctrl + F" y busca esto <head>
5. Una vez que lo hallas encontrado, pega Justo despues, sin dejar espacios el siguiente 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'>
</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.
.jpg)
0 comentarios:
Publicar un comentario