Tutoriales para personalizar Blogger
  2. Blogger Tips

Colocar video de YouTube como fondo del blog


De seguro que navegando por la red se habrán topado con algunos blog que tienen como fondo un video. Y también estoy seguro que el resultado les sorprendió bastante que les vino a la cabeza en como podrían lograr ese efecto en su blog. Bueno en esta oportunidad veremos paso a paso como lograr este sorprendente efecto en nuestro blog.

Para lograr este efecto usaremos el plugin Tubular de jQuery que nos permitirá usar un video de YouTube como fondo de nuestro blog.
Como todas las cosas esto tiene sus desventajas. En primer lugar, y creo que el mas importante, es que puede hacer muy lenta la carga de nuestro blog. Y en segundo lugar es que no podremos silenciar el video y si el video tiene anuncios, estos se verán también en tu blog.


Luego de esa pequeña introducción de este efecto, vamos a lo que nos interesa.

Para empezar entraremos a Plantilla > Editar HTML y justo debajo de la etiqueta <head> colocaremos el siguiente código:

<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'>
//<![CDATA[
$().ready(function() {
$('body').tubular('KDotYF8Bgyw','wrapper-video');
});
//]]>
</script>
Si tu blog ya tiene integrado la librería de jQuery, elimina las anteriores versiones para que no tengas ningún error y utiliza la que esta en el código anterior (primera linea).

Ahora el único cambio que harás será solo al final de todo el código. Al final encontraras un script en el cual veras esto KDotYF8Bgyw el cual deberas remplazar por el ID del video de YouTube que quieras tener de fondo.



Luego de cambiar la ID del video de YouTube, buscaremos la etiqueta <body>. En el caso de que uses una plantilla oficial de Blogger tendrías que buscar el siguiente código:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Y debajo colocaríamos lo siguiente:
<div id='wrapper-video'>
Luego antes de la etiqueta </body> colocamos lo siguiente:
</div>
Y ahora solo queda guardar y podremos ver el video de YouTube como fondo en nuestro blog.

Gracias a CiudadBlogger

¿Tienes alguna duda?