Tutorial: Video de Youtube como fondo en Blogger

GaboTs

Baneado
Épsilon
Social Media
Verificación en dos pasos desactivada
Desde
30 Nov 2013
Mensajes
934
DEMO: GaboTs (MIO)


1 Después de <head> colocar el script:


HTML:
<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>


2 Luego localiza la etiqueta <body>

Si usas una plantilla del Diseñador entonces busca esta línea:

HTML:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>


Abajo de cualquiera de las dos agrega lo siguiente:

HTML:
<div id='wrapper-video'>


Luego antes de </body> coloca esta etiqueta de cierre:

HTML:
</div>

barra separadora.png

PARA CAMBIAR EL VÍDEO/FONDO

UNA VES GUARDADOS LOS CAMBIOS HACEMOS LO SIGUIENTE

Entramos a "Editar HTML"

Presionamos Control + F para activar la búsqueda rápida

Buscamos esta linea
HTML:
$('body').tubular('7gZd4b6bXu4','wrapper-video');

Y en tubular('7gZd4b6bXu4'

EDITAMOS LOS NÚMEROS CON EL ID DEL VÍDEO QUE QUIERAS PONER COMO FONDO PARA TU BLOGG :encouragement:



¡Y LISTO!

Recuerda: No tiene opción de silenciar tendrás que buscar un vídeo sin sonido

Te recomiendo que utilices Vídeos HD para evitar lineas negras en el blogg (no tiene nada de malo) solo que afecta la reproducción

Bueno eso ah sido todo por hoy :star2: Espero poder a ver aportado algo bueno!

Si no te funciono envía MP te explicare detalladamente
 

Carlos Arreola

Admin
Ómicron
Verificado con videollamada
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Excelente comerciante!
Desde
6 Abr 2009
Mensajes
4.500
Muy buen aporte, nunca había mirado un blogger así. Se agradece :)
 

bola6

Gamma
Diseñador
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
16 May 2011
Mensajes
492
Vaya, bastante interesante, nunca lo había pensado. Gracias.
 

Rogg

Delta
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
23 Sep 2009
Mensajes
683
Que bueno, no sabía que se pudiera hacer eso! Gracias
 

Alphax

Kappa
Social Media
Verificación en dos pasos desactivada
Desde
15 Dic 2013
Mensajes
2.696
Excelente amigo, es muy bueno si es que alguien quiere visitas y lo mandas a travez de un blog :D
 

anferro

Ómicron
SEO
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
29 Oct 2011
Mensajes
4.519
Muy buen aporte nunca habia visto algo asi gracias por compartir
 

pugozo24

Eta
Redactor
Verificación en dos pasos desactivada
Desde
22 Feb 2013
Mensajes
1.465
genial, no sabia que podía hacer esto XD :drunk:
 

Ragnasin

VIP
Kappa
Social Media
Verificación en dos pasos desactivada
Desde
25 Ago 2012
Mensajes
2.625
Genial ya había trabajado para una empresa, un proyecto similar.
 

Galbatorix

Dseda
Verificación en dos pasos desactivada
Desde
13 May 2013
Mensajes
1.232
Esta es una técnica fantástica, muy lucidora y profesional. Te dejo 4 estrellitas porque no me gusta eso que llamas batacha...
* * * * *
 

dooz

Préstamo
Épsilon
Verificación en dos pasos desactivada
Desde
25 Sep 2011
Mensajes
849
Realmente esto es algo novedoso, hasta ahora nunca había visto algo asi por la web.
 

ShikabaNe20

Alfa
Verificación en dos pasos desactivada
Desde
11 Feb 2014
Mensajes
18
La imaginación de las personas por hacer un producto novedoso es inigualable. Se ve bueno este tuto, bastante personalización daría a mi blog. Gracias. :topsy_turvy:
 

zero777

Baneado
Verificación en dos pasos desactivada
Desde
9 Jun 2013
Mensajes
2.979
porfin lo publicastes ?
pues muchas gracias
 

GaboTs

Baneado
Épsilon
Social Media
Verificación en dos pasos desactivada
Desde
30 Nov 2013
Mensajes
934
porfin lo publicastes ?
pues muchas gracias

Pues aquí esta mi aporte :encouragement:

---------- Post agregado el 14-may-2014 hora: 16:32 ----------

La imaginación de las personas por hacer un producto novedoso es inigualable. Se ve bueno este tuto, bastante personalización daría a mi blog. Gracias. :topsy_turvy:

De nada bro :encouragement: suerte con tu blogg
 

Hector Luna

Baneado
No recomendado
Social Media
Verificación en dos pasos desactivada
Desde
4 May 2014
Mensajes
75
no puedo ponerlo :ambivalence:
 

SFM2014

Eta
Verificación en dos pasos desactivada
Desde
25 Abr 2014
Mensajes
1.368
Pese a ser un aporte antiguo y el usuario esta baneado, lo aplique pero el video no se ajusta automaticamente, funciona bien en paginas normales, si alguien sabe como hacer que el video cambie automaticamente de resolucion segun el dispositivo que se usa, que me ayude por favor
 

Crea una cuenta o accede para comentar

Debes ser un miembro para poder comentar

Crear cuenta

Crea una cuenta en nuestra comunidad

Acceder

¿Ya tienes una cuenta? Accede aquí


Arriba