Tutorial: Cómo poner un vídeo de Youtube de fondo en Blogger

GaboTs Seguir

Épsilon
Social Media
Verificación en dos pasos desactivada
Desde
30 Nov 2013
Mensajes
931
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
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:

Q5zKr8b.png


¡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
Sigma
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
¡Excelente comerciante!
Suscripción a IA
Desde
6 Abr 2009
Mensajes
11.435
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 activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
23 Sep 2009
Mensajes
701
Que bueno, no sabía que se pudiera hacer eso! Gracias
 

Alphax

Social Media
No recomendado
Verificación en dos pasos desactivada
¡Ha verificado su Paypal!
Desde
15 Dic 2013
Mensajes
2.752
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
Excelente amigo, es muy bueno si es que alguien quiere visitas y lo mandas a travez de un blog :D
 

GaboTs

Épsilon
Social Media
Verificación en dos pasos desactivada
Desde
30 Nov 2013
Mensajes
931
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.

anferro

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

Ragnasin

Kappa
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
25 Ago 2012
Mensajes
2.686
Genial ya había trabajado para una empresa, un proyecto similar.
 

GaboTs

Épsilon
Social Media
Verificación en dos pasos desactivada
Desde
30 Nov 2013
Mensajes
931
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.

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 activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
25 Sep 2011
Mensajes
953
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

Verificación en dos pasos desactivada
Desde
9 Jun 2013
Mensajes
2.975
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
porfin lo publicastes ?
pues muchas gracias
 

GaboTs

Épsilon
Social Media
Verificación en dos pasos desactivada
Desde
30 Nov 2013
Mensajes
931
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
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

Social Media
No recomendado
Verificación en dos pasos desactivada
Desde
4 May 2014
Mensajes
75
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
no puedo ponerlo :ambivalence:
 

SFM2014

1
Zeta
Verificado
Verificación en dos pasos activada
Suscripción a IA
Desde
25 Abr 2014
Mensajes
1.512
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
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba