Vídeo de Youtube como fondo del blog en Blogger

Cómo ya lo hemos dicho, Blogger es una plataforma muy flexible que permite con pocos conocimientos lograr resultados verdaderamente increíbles, como es el caso de hoy, en el que veremos como añadir un vídeo de Youtube como fondo del blog en Blogger.


Vídeo de Youtube como fondo del blog en Blogger
Vídeo de Youtube como fondo del blog en Blogger

Vista Previa del truco


Ve a Tema, Editar HTML y pega justo debajo de <head> 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('7gZd4b6bXu4','wrapper-video');
});
//]]>
</script>

Ahora debajo de la etiqueta <body> pega lo siguiente:

<div id='wrapper-video'>

Para finalizar agrega arriba de  </body> una etiqueta de cierre </div>.

Para configurar el vídeo que quieres de fondo, busca la siguiente nota:

$('body').tubular('7gZd4b6bXu4','wrapper-video');

Edita los número 7gZd4b6bXu4 que corresponden a la ID de un vídeo de Youtube, como en el caso de la ID de la siguiente URL de un vídeo: https://www.youtube.com/watch?v=3VmoZrxXbmg.

Entradas que pueden interesarte

disqus