Agregar un video de YouTube como fondo del blog

22 de julio de 2012 140 comentarios ,


Me preguntan por Facebook 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 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.

También se puede hacer en HTML5, el problema es que con ese método se necesita cargar el video en 3 formatos distintos (.mp4, .webm y .ovg) además de una imagen para los navegadores que no lo soporten, así que con esta opción de YouTube me parece más práctica pese a los inconvenientes que tiene.

En este blog de pruebas puedes ver el demo funcionando.

El primer paso es poner justo después de <head> el 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'>
//<![CDATA[
$().ready(function() {
$('body').tubular('7gZd4b6bXu4','wrapper-video');
});
//]]>
</script>
Luego localiza la etiqueta <body>
Si usas una plantilla del Diseñador de Plantillas entonces busca esta línea:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Debajo de cualquiera de ellas dos agrega lo siguiente:
<div id='wrapper-video'>

Luego antes de </body> coloca esta etiqueta de cierre:
</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.
Si ya usaras jQuery elimina las otras versiones que tengas para que no se dupliquen y tengas problemas.
Y si usas Scriptaculous o Mootools deberás aplicar unos cambios a la segunda parte sel primer código que se agrega para que puedas usarlo.

Autor | jQuery Tubular


140 comentarios en:

" Agregar un video de YouTube como fondo del blog "

  1. Hola amigo. La idea es IMPRESIONANTE y totalmente ORIGINAL. Pero vi que el video se reproduce muy rápido. Así será? o es una condición que se puede mejorar y que la reproducción SEA NORMAL?
    La otra pregunta, la plantilla que está puesto ahora de donde la puedo sacar?
    Gracias y un abrazo desde Montevideo-Uruguay

    ResponderEliminar
    Respuestas
    1. El video de ejemplo que usé es de esa forma, es una cámara rápida de un día en Chicago, por eso te ha dado la impresión que se reproduce más rápido de lo normal ;)

      La plantilla es la Travel, de Blogger.
      Un abrazo.

      Eliminar
    2. Es SIMPLEMENTE G E N I A L !!! ;D

      Eliminar
    3. Hola amigo. Pasate por http://soloparapruebascrochet.blogspot.com/ y fijate lo que hice "humildemente" y lo encontrás en YouTube http://www.youtube.com/watch?v=IZiMwd_iCZI&feature=g-upl
      YA IRÉ AVANZANDO EN MANEJO DE LA TECNO.
      Gracias y abrazo.

      Eliminar
    4. Gracias amigo, me encuentro muy feliz. Ahora voy a meterme de lleno en el nuevo blog de prueba y lo convertiré en uno real.
      Gracias por tu apoyo. ;D

      Eliminar
  2. ¿Seré el primer comentario? jajajaj.

    Muy buen tutorial Potro. ¡Lo usaré cuando lo necesite!

    ResponderEliminar
  3. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Hola JhOn, si el código es muy largo quizá convenga que uses un spoiler para que no esté tan llena la entrada:
      http://ciudadblogger.com/2011/04/spoiler-para-ocultar-y-mostrar.html

      Eliminar
  4. Oye otra preguntita si no es molestia, tengo un detalle que poco me gusta de mi blog, sucede, que yo oculte con la herramienta de blogger la navbar, pero ahora yo veo un espacio en su lugar. Como hago para reducir ese espacio que hay encima de la cabecera???

    Puedes observarlo en mi blog --> www.tutonica.blogspot.com

    Gracias :)

    ResponderEliminar
    Respuestas
    1. Mira esta entrada, ahí se habla sobre ello:
      http://ciudadblogger.com/2011/02/eliminar-espacio-superior-en-las.html

      Saludos.

      Eliminar
  5. Como siempre excelente información.
    Solo ha faltado una / en head, pero se entiende perfectamente.

    Un abrazo y gracias por tantos buenos trabajos que nos has regalado.

    ResponderEliminar
    Respuestas
    1. En esta ocasión no es antes de </head> sino después de <head> para que el script sea lo primero en cargar :)
      Otro abrazo para ti.

      Eliminar
    2. Ups. Pensé que era así porque no me funcionó ubicarlo allí pero sí luego de </head> y antes de <body>. Voy a ver en que me he equivocado. Gracias

      Eliminar
    3. No creo que te hayas equivocado, lo más seguro es que antes de este script que has puesto tengas otro que pudiera interferir si este se lee primero.
      Saludos.

      Eliminar
  6. waaao que impresion crei que no era posible lo habia visto en otros blogs pero se veia con mala calidad, lo probare a ver que tal. gracias y saludos

    ResponderEliminar
  7. Vaya, un truco muy bueno! No me esperaba que se pudiese hacer tal cosa XD Blogger es una caja de sorpresas...
    ¡Felices vacaciones! :D

    ResponderEliminar
    Respuestas
    1. Yo tampoco me lo esperaba, lo he sabido sólo porque me lo han preguntado porque si no ni me entero :P
      Disfruta tus vacaciones :)

      Eliminar
  8. Buenas Potro, hacía mucho tiempo que no comentaba, no sé si me recuerdas o qué xD

    En fin, espero que estés bien y sigas blogueando (yo lo dejé, por eso no comento mucho y tampoco te acoso a preguntas)

    Saludos.

    ResponderEliminar
    Respuestas
    1. Claro que te recuerdo Lluís, gracias por pasar, ya sabes que siempre eres bienvenido.

      Eliminar
  9. Interesante, como siempre ;)
    Gracias Potro.
    Un saludo.

    ResponderEliminar
  10. Esta muy genial, pero creo que tienes razón , debe usarse solo en ocasiones especiales. Esta muy genial, tengo que resistirme a no usarlo. Por cierto, el video se ve muy bien, pero tengo una duda ¿Todos los videos se verán así de bien?

    ResponderEliminar
    Respuestas
    1. Pues dependerá del video, de qué tanta calidad tenga, si es HD o no, etc. ;)

      Eliminar
  11. Hola Potro:
    Que es mejor Blogger o Wordpress?
    Cual es mejor y tambien quiero que tenga un registro y acceso para la gente que se quiera registrar :D

    ResponderEliminar
    Respuestas
    1. No hay un "mejor" o "peor", todo depende de las necesidades de cada blog, algunos blogs pueden requerir cosas que Blogger no ofrece o viceversa, pero eso ya depende de cada caso en particular.
      Si buscas que la gente se pueda registrar entonces tendrás que hacerlo con WordPress.org, porque con Blogger al no tener acceso al hosting no podemos crear base de datos para el registro de los usuarios.

      Eliminar
  12. Hola.

    ¿Puedo hacerte una pregunta que no está relacionada con este tema en particular?

    ResponderEliminar
  13. Hola.

    ¿Puedo hacerte una pregunta que no está relacionada con este tema en particular?

    ResponderEliminar
    Respuestas
    1. Si no es sobre alguna entrada ya publicada claro que sí, no hay problema.
      Pero si es sobre alguna entrada del blog entonces debes hacerla en la entrada que corresponde ;)

      Eliminar
  14. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. No creo, parece que modificó una plantilla que descargó, posiblemente la original sea la plantilla
      "Johny Kenthir".

      Eliminar
  15. Potro, mi pregunta es lo contrario. COMO HACER PARA AGREGAR O PONER UN VIDEO DE YOUTUBE ENCIMA DE UNA IMAGEN ? o QUE EL VIDEO QUEDE POSICIONADO EN CIERTA AREA DE LA IMAGEN DE FONDO..ayuda

    ResponderEliminar
    Respuestas
    1. Hola Little Monsters. Te dejo un enlace a una entrada de Oloblogger donde explica detalladamente cómo se hace lo que pides:
      http://www.oloblogger.com/2010/01/enmarcar-videos.html

      Eliminar
  16. Muy buen lo intentare en el blog de pruebas a ver que tal THANKS!!

    ResponderEliminar
  17. SE ME OCURRE PONER UN VIDEO NO DE youtube sino un video subido a dropbox formato "flash"... es posible?

    ResponderEliminar
    Respuestas
    1. Sí, de hecho es una entrada que pronto se publicará ;)

      Eliminar
  18. Es una idea maravillosa, no se si intentarlo por los inconvenientes, pero es una idea genial!!! gracias!!

    ResponderEliminar
  19. No puedo creer que se pueda hacer esto :D Excelente!!! Gracias :)

    ResponderEliminar
  20. Saludos El Potro. Aqui vengo con una difíl. Hace tiempo habia visto un truco para que siempre aparezca de primero en el blog la entrada con mas nueva con una etiqueta especifica. Hoy me la topé de nuevo, y quise probarla (ahora que tengo un poco más de experiencia con blogger) pero aparentemente ya no funciona por las actualizaciones que ha tenido el sistema.

    ¿Habrá una forma que sepas, de lograr este truco? Te diejo la dirección del código: http://elbalcondejaime.blogspot.com/2010/06/mostrar-las-entradas-con-una-etiqueta.html#comment-form

    Gracias!!

    ResponderEliminar
    Respuestas
    1. Hola Bimago del Neoverso, ese método nunca lo probé, pero sí otros que me encontraba y otros tantos que yo experimentaba, pero ninguno me dio resultados, debe ser como dices, que Blogger con tanto cambio ya no permite hacer ese tipo de modificaciones.
      De todas formas, si me entero de un método que sí funcione lo publico de inmediato ;)

      Eliminar
    2. Pura vida, quedará seguir jungando con la fecha de publicación del post hasta entonces :(

      Eliminar
  21. Hola, tengo un problema con la incrustación de una animación flash en la cabecera del blog (sé que no es éste el artículo correspondiente pero lo pongo por aquí por si en el otro no lo lees)
    El caso es que sigo los pasos que has dado pero en la vista previa no se ve el video (aunque sí se crea el espacio para el mismo) No sé si tendrá que ver con que se trata de un archivo .flv (aunque también he probado convirtiéndolo a .swf) si es por el hosting (he probado Vimeo, Tinypic y Videobam)o por algo que hago mal a la hora de cambiar el html. Si pudieras ayudarme...
    Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Hola Martha, no hace falta duplicar los comentarios, ya te he respondido allá ;)
      ¡Saludos!

      Eliminar
    2. Lo siento! pero es que en la otra entrada no puedo ver ni mi comentario ni tu respuesta, no sé por qué.

      Eliminar
    3. En las entradas con más de 200 comentarios hay que darle click al botón "Cargar más", de esa forma se mostrarán todos los comentarios, incluyendo el tuyo.

      Eliminar
  22. ¡Hola! Disculpa que te moleste una y otra vez, jaja. ¿Se puede poner un video en una Página? Osea, así como aquí se pone de fondo, ponerlo de ese mismo tamaño pero dentro de los límites de una página. ¿Me explico? Salu2

    ResponderEliminar
    Respuestas
    1. Pues quizá lo que convendría es que uses este mismo método, pero el primer código enciérralo en una condicional, la que es para que se ejecute en una página específica:
      http://ciudadblogger.com/2010/03/condicionales-de-blogger.html

      Luego oculta todos los elementos sólo de esa pàgina, así se verá únicamente el fondo del video:
      http://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html

      Eliminar
    2. Muchísimas gracias Potro!!!!!! Genio total!!!!

      Eliminar
  23. Hola, soy nuevo en esto asi que no se poner eso, pero esta excelente, cuando sepa de esos codigos y eso lo pondre :) saludos

    ResponderEliminar
    Respuestas
    1. No hay problema, con el tiempo irás intentado este tipo de cosas, verás que no es difícil :)

      Eliminar
  24. Hola! Muchas felicitaciones por esta gran pagina que me ha ayudado demasiado en la creacion de mi web !

    Tengo una inquietud y quisiera que me ayudaran a resolverla, no he encontrado mejor espacio que este para comentarla.

    Lo que sucede es que quiero que en la portada de mi blog se puedan reproducir videos sobre las imagenes asi como lo podemos ver en as.com - esto con el objetivo de implementarlo en mi web canalfutbolista.com

    Mil gracias !!!

    ResponderEliminar
    Respuestas
    1. Hola Sadhu Lara, ¿quieres que los videos de las entradas se reproduzcan en la portada? Con ese Leer más no se podrá, tendrías que tener las entradas normales. A decir verdad nunca he visto una plantilla para Blogger que tenga los sumarios y además permita reproducir los videos.

      Saludos.

      Eliminar
    2. Ok, gracias por tu pronta respuesta Potro.
      Otra inquietud XD. Intentare hacerme entender! ¿Sabes como puedo poner un icono a las imagenes de la portada para simbolizar que en esa entrada hay un video, sin nesecidad de editar la imagen?

      Eliminar
    3. Con ese sistema de sumarios puedes poner una imagen que sólo se vea en la portada, así podrías elegir que ahí, en la portada, aparezca la imagen de un video:
      http://ciudadblogger.com/2011/02/elegir-que-resumen-mostrar-en-el-leer.html

      Eliminar
    4. Gracias !!! lo pondre en practica.

      Eliminar
  25. Hola! Necesito ayuda.. Cuando coloco el video me queda por encima del blog por ende todas mis entradas y demas son imposibles de visualizar. como hago para que quede de fondo el video? Muchas Gracias!

    ResponderEliminar
  26. Muy interesante!!! una preguntilla, yo utilizo una plantilla simple de blogger y al poner el video no se me encaja en la pantalla, queda un trozo por arriba sin cubrir. A que se puede deber? muchisimas gracias

    ResponderEliminar
    Respuestas
    1. Podría ser el espacio de la NavBar, ¿en cuál blog lo has puesto?

      Eliminar
  27. Hola Potro buen día! Sigo tus publicaciones hace tiempo, pero es la primer vez que te escribo.
    Tengo un sitio con un fondo de video hecho con este tutorial. Mi consulta es si existe algún codigo que el usuario al ingresar nuevamente al sitio el video sea otro.
    Desde ya muchas gracias!
    Marcos

    ResponderEliminar
  28. Hola Potro buen día! Sigo tus publicaciones hace tiempo, pero es la primer vez que te escribo.
    Tengo un sitio con un fondo de video hecho con este tutorial. Mi consulta es si existe algún codigo que el usuario al ingresar nuevamente al sitio el video sea otro.
    Desde ya muchas gracias!
    Marcos

    ResponderEliminar
  29. Hola Potro buen día! Sigo tus publicaciones hace tiempo, pero es la primer vez que te escribo.
    Tengo un sitio con un fondo de video hecho con este tutorial. Mi consulta es si existe algún codigo que el usuario al ingresar nuevamente al sitio el video sea otro.
    Desde ya muchas gracias!
    Marcos

    ResponderEliminar
  30. Hola Potro, buen día!
    Sigo tus post hace tiempo, pero es la primer vez que te escribo.
    Mi consulta se debe a que en un sitio realizado tengo un video de fondo hecho con este tutorial.
    La duda que me surgió es que si existe algún código con el cual el video cambie cuando el usuario ingresa nuevamente al sitio.
    Espero que se entienda la consulta.
    Desde ya muchas gracias!

    ResponderEliminar
  31. El Potro, buen día!
    Tengo un sitio con un video de fondo tal cual explica este tutorial.
    Mi pregunta es la siguiente..
    Existe algún codigo para que el usuario al ingresar nuevamente al sitio se reproduzca otro video?
    Desde ya muchas gracias.
    Marcos

    ResponderEliminar
    Respuestas
    1. Hola Marcos, los comentarios están moderados, por eso no los ves de inmediato al publicarlos, te lo menciono sólo porque vi que dejaste varios :)

      No conozco una variación de este script que permita mostrar uno distinto, pero si me entero actualizo la entrada o publico una nueva ;)
      Saludos!

      Eliminar
  32. hola!! pongo todas las instrucciones tal cual como lo pones en la enrada, el problema es que el video se me pone por encima de la plantilla de mi blog, no por detras, que debo hacer? gracias por tu pronta respuesta
    whatsuprevista@gmail.com @revistawhatsup quedo atenta a tu respuesta

    ResponderEliminar
  33. que pena no deje el blog donde lo quiero poner http://aficionescolombia.blogspot.com/mil gracias potro

    ResponderEliminar
    Respuestas
    1. Hola, entré a tu blog pero no he visto este truquillo puesto sino el de las imágenes en transición las cuales se ven bastante bien :)
      Saludos!

      Eliminar
  34. genial!! ya lo añadí a mi blog :D http://1worldpic.blogspot.com/
    pero aun se ve una parte naranja de la plantilla anterior :S

    ResponderEliminar
    Respuestas
    1. Prueba eliminar todo lo que está dentro de:
      .body-fauxcolumn-outer .fauxcolumn-inner {

      Y de:
      .body-fauxcolumn-outer .cap-top {

      Y de:
      .body-fauxcolumn-outer .cap-top .cap-left {

      También elimina el padding que está dentro de body {
      Dale Vista Previa y mira si se arregla.

      Eliminar
    2. Gracias! pero me gusta + con la parte naranja XD

      http://1worldpic.blogspot.com/ ;)

      Eliminar
  35. Si el flash tiene botones, mi pagina vendria a estar toda hecha en flash los botones las acciones y demas si yo le aplico este codigo sin ponerle nada encima yo puedo hacer click y que funcionen las acciones y los links. muchas gracias

    ResponderEliminar
    Respuestas
    1. No lo he intentado con un archivo flash de esas características, sería cuestión de que hagas la prueba:
      http://ciudadblogger.com/2012/08/usar-un-archivo-swf-flash-como-fondo-del-blog.html

      Eliminar
  36. Hola el potro, como va??

    Mira, mi duda es si no encontraste la manera de que el usuario pueda quitar el audio, me parece increible esta posibilidad de incrustar video como fondo, pero tambien me gusta que el usuario pueda elegir si quiere o no sonido en ese momento....

    Muchas gracias de antemano.

    ResponderEliminar
    Respuestas
    1. No alfonso, pero puedes editar el video desde tu ordenador, quitarle el audio y subirlo nuevamente a YouTube.

      Eliminar
    2. Lo olvidaba, en una versión anterior del script sí habían controles de volúmen, incluso de play y pausa, pero luego el autor actualizó el script y le fue imposible hacer que estos controles funcinoaran de nuevo :/

      Eliminar
  37. Genial,me parece una idea estupenda que pienso usar a menudo.Que te parece como quedo en el blog http://ampa-arteagabeitia.blogspot.com.es/,si le quito cosas a la plantilla cargara mas rapido o no tiene nada que ver?.Gracias por tus aportes.Un saludo

    ResponderEliminar
  38. Genial,me gusta, queda bien y lo usare a menudo,que te parece como quedo en http://ampa-arteagabeitia.blogspot.com.es/,si le quito cosas a la plantilla cargara mas rapido el video o no tiene nada que ver?Gracias y un saludo.

    ResponderEliminar
  39. Potro,tocando,tocando, decidí convertir el video en archivo swf,la imagen no estan buena,pero gracias a tu entrada ocupa toda la pantalla y creo que carga antes.Conoces alguna forma de mejorar la imagen de este tipo de archivos?.Un saludo.

    ResponderEliminar
    Respuestas
    1. La verdad no lo sé, supongo que puede mejorar si el archivo fuera más grande desde su creación, pero sólo supongo...

      Eliminar
  40. Hola Potro.
    Hace poco he descubierto tu blog y me ha encantado, lo encuentro muy útil. Quería hacerte un comentario acerca de un problema que me surge. Resulta que el vídeo se ve perfectamente y el blog también, pero al clicar en las imágenes de los posts, se abre el lightbox y la imagen apenas se ve detrás del vídeo y se queda la página bloqueada. Al deshacer lo del vídeo, el problema se soluciona. ¿Me puedes ayudar con esto? Gracias!

    ResponderEliminar
    Respuestas
    1. Hola Jose, prueba agregando estos estilos:
      .CSS_LIGHTBOX {
      z-index:9999999999999 !important;
      }

      ¡Saludos y gracias por tu comentario!

      Eliminar
  41. Gracias Potro!!
    Funcionó a la primera!!
    Aunque por otro lado, había colocado la flecha de ir arriba con JQuery y me ha dado conflictos y la he tenido que desinstalar. A ver si encuentro la forma de que me funcionen las dos cosas a la vez :)
    Un saludo. Ya te diré si lo he conseguido. ¿Alguna sugerencia?

    ResponderEliminar
  42. Gracias Potro, pero ya había revisado la plantilla y no tengo ninguna otra versión de jquery. En fin...
    Si quieres echar un vistazo:
    http://masde5.blogspot.com.es/
    Gracias!!

    ResponderEliminar
    Respuestas
    1. Entonces tendrías que poner el otro gadget para saber qué puede estar pasando.
      Saludos.

      Eliminar
  43. Hola Potro, no se que hice!!! :(
    primero funcionaba perfecto, despues estuve toqueteando el diseñador de plantillas creo, y desde ahi el video se ve atras de un fondo negro. El problema es que no se de donde salio ese fondo y como sacarlo! creo que no es el background y probe con z-index pero queda o atras o al frente de todo... ayudaaaaaaaaaa XD
    el blog es http://www.iguazualojamiento.com.ar/

    ResponderEliminar
    Respuestas
    1. Hola Lucas FM, agrega estos estilos para solucionarlo:
      body, .body-fauxcolumn-outer {
      background: transparent !important;
      }

      Eliminar
  44. Hola Potro, me encanta su página, me ha sido de muchísima utilidad. Sin embargo, tengo muchas ganas de hacer que funcione este truco con un video de youtube pero no me sale. Hago todo lo que dices pero no aparece ningun video, sigue el blog como estaba antes. ¿Necesito un programa o algo? gracias.

    ResponderEliminar
    Respuestas
    1. Hola Alfredo, ¿en cuál blog lo has puesto? entré al blog de tu perfil pero no vi los códigos puestos ahí.

      Eliminar
  45. El blog en el que quiero poner este truco es este:

    http://thesiderealwaves.blogspot.com.es/

    Sin embargo, acostumbro a quitar los códigos cuando los trucos no me funcionan, por eso habrás visto que no puse nada. Estuve dos días estudiando por varias fuentes qué es eso de jquery cómo se utiliza, el plugin tubular etc etc, pero aún así, no me enteraba de mucho y puede ser, en parte, por el tipo de plantilla que tengo, que puede ser no compatible con el script. Pero no lo se, soy demasiado ignorante en estos temas. Eso sí, para que te aclares, hice paso por paso todo lo que tu dijiste.

    Un saludo y gracias por contestarme.

    ResponderEliminar
    Respuestas
    1. Siempre será indispensable que dejes los códigos puestos, aunque no funcione, de otra forma no podré saber qué o porqué está mal o la razón por la que no funciona.
      A simple vista veo que tienes varias versiones de jQuery y debes tener sólo una, la más actual. Al final de la entrada se menciona ese detalle.

      Eliminar
  46. Hola potro es muy bueno este truco. lo utilice y funciono a la perfección "la primera vez". Sucede que a la plantilla que utilice no pude sacarle algunas cosas que tapaban el video. Asi es que cambie la plantilla por una que ya habia utilizado en mi otro blog, pero al hacerlo esta vez no funcionó. Segui los mismos pasos y lo vi varias veces, pero ya me perdi. el blog en el que intento aplicarlo es
    http://yaninafontana.blogspot.com.ar/
    Los codigos estan puestos, no los borre.

    ResponderEliminar
    Respuestas
    1. Hola La Fontana, ya tienes 2 versiones de jQuery en ese blog, sólo debes tener una, la más reciente. Al final de la entrada hay un enlace sobre ese tema.

      Eliminar
  47. Potro mira, en una de mis entradas: http://www.comoperderlacelulitis.net/2011/10/metodo-ideal-para-adelgazar_9760.html tengo este video y es el mismo que hay en esta pagina: http://www.adelgazarparasiempre.com/home2/?hop=filonono

    Me gustaria poner el video mas o menos como aparece en esta segunda pagina con un marco que no se vena los bordes negros ni lo de pause y todas esas cosas. Como puedo hacerlo??

    ResponderEliminar
    Respuestas
    1. El video que tú tienes es de YouTube, y el de esa página es de JW Player, son formatos y configuraciones distintas. En Vagabundia puedes encontrar una entrada sobre la instalación de ese reproductor.

      Eliminar
  48. y tu sabes como le podria quitar los bordes en negro al que tengo en mi web? y quitarle lo de pauese y todo eso?

    ResponderEliminar
    Respuestas
    1. No, a los de YouTube no se les puede hacer nada de eso :(

      Eliminar
  49. donde me aconsejarias que lo subiese para que si se lo puediese hacer eso?

    ResponderEliminar
    Respuestas
    1. Hasta donde sé ningún servicio gratuito permite personalizar los reproductores de tal manera, tienes que hacerlo como te mencioné antes para poder usar un reproductor como el que deseas.

      Eliminar
  50. pasame el enlace de vanguardia que no lo encuentro porfavor

    ResponderEliminar
    Respuestas
    1. No tengo el enlace a la mano, hace tiempo vi esa entrada, usa su buscador y pon JW Player

      Eliminar
  51. Esta Muy Bueno Este Post , Potro Hasme Un Favor comohago para que el fondo del video tengo sonido? si se puede?

    ResponderEliminar
    Respuestas
    1. No sé decirte, no encuentro en el código dónde esté poniendo el video sin sonido o.O

      Eliminar
  52. disculpa una consulta se ve el video pero no se ven las entradas del blog

    ResponderEliminar
  53. queda sobre las entradas del blog no va al fondo del blog...no se como hacerlo pero no puedo dejarlo online porque no se ve el blog

    ResponderEliminar
    Respuestas
    1. Ponlo en un blog de pruebas con la misma plantilla así puedo ver el problema que mencionas.

      Eliminar
  54. tengo un problema!!... he utilizado un video muy corto para crear la sensacion de un loop infinito... pero cada vez que el video temrine este lo vuelve a cargar de cero e visto en la pagina de tubular y se puede agregar el comando repeat: true pero nose en que parte del codigo pegarlo para que el haga ese repeat y no lo tenga que volver a cargar de cero y el video no se pause a cada momento...

    ResponderEliminar
    Respuestas
    1. No he comprendido MetalleriUM. Los loops tanto en los GIFS como en los archivos de audio y video se refieren a reproducir la secuencia desde el inicio hasta el final de forma infinita; eso es lo que también hace este script, una vez finalizado el video lo carga nuevamente. A no ser que te refieras a otra cosa.

      Eliminar
  55. amigo una consulta , puse todo bien pero el video me sale solo en la parte de abajo , como hago para que salga en todo el fondo .

    espero tu respuesta , Saludos

    ResponderEliminar
  56. Hola Potro, que bárbaras las cosas que hacés. Me mató el video, y capaz no te guste lo que te voy a pedir... pero lo adoré. Quiero el video, y no lo encuentro en youtube... ¿atrapaste la idea?.

    ResponderEliminar
    Respuestas
    1. Por supuesto Daniel, es este:
      https://www.youtube.com/watch?v=7gZd4b6bXu4

      Eliminar
  57. Hola El Potro, muchas gracias por tu aporte. Tengo una duda, en mi blog este gadget me sale SÓLO POR LA MITAD, o sea el header se ve como una imagen y justo por la mitad se ve el vídeo. Creo que el problema es similar al de Daniel.

    Muchas gracias de antemano

    ResponderEliminar
  58. Hola que tal?? una pregunta sirve para tumblr? por que he intentado y no me lo pone :(

    ResponderEliminar
  59. Hola!! :) una pregunta sirve para tumblr?? por que he intentado ponerlo y no lo hace :(

    ResponderEliminar
    Respuestas
    1. Con seguridad no puedo decirte ya que todo lo que hay aquí ha sido probado sólo en Blogger.

      Eliminar
  60. puse el video pero ocupo todo el espacio de blogger y solo se ve el video no se ve lo demas

    ResponderEliminar
  61. Hola amigo Potro... Excelente entrada y la idea es muy brillante... ya la practique y funciona genial, pero tienes razón en cuanto a que la pagina se ralentiza un poco... sin embargo como me encanta la apariencia, pienso colocar una imagen de fondo, pero no se como colocar ese fondo traslúcido negro que tienes en tu pagina de prueba que permite ver la imagen del fondo... te agradecería cualquier ayuda al respecto amigo.

    ResponderEliminar
  62. Potro, algo así como esto http://css-tricks.com/examples/BlurryBackgroundEffect/
    me podrías decir como lo hago?.. ellos lo explican pero no me funciona

    ResponderEliminar
    Respuestas
    1. Hola Wifredo, si no quieres tener problemas de compatibilidad con los navegadores la mejor opción es que uses una imagen semitransparente en formato PNG y esa la pongas en el contenedor que quieras, el lugar exacto dependerá de dónde quieras ponerla y de tu plantilla.

      Eliminar
  63. ami me tira error siempre en esta linea me podria ayudar ya no se que intentar esta es la linea
    //]]>

    ResponderEliminar
    Respuestas
    1. Revisa nuevamente el lugar exacto donde debes poner los códigos, es casi seguro que lo has puesto en un lugar diferente. Si continuas con el problema especifica qué error te da. Saludos.

      Eliminar
  64. Hola potro, me pregunto si puedes ayudarme, me gustaría poner en la cabecera de mi blogg un vídeo o imagen en movimiento en vez de una fotografía pero no se como hacerlo

    ResponderEliminar
    Respuestas
    1. Hola, sigue los mismos pasos de esta entrada, pero en lugar de poner el código del flash pondrías el código del video o lo que quieras:
      http://www.ciudadblogger.com/2009/06/cabecera-del-blog-en-flash.html

      Eliminar
  65. Hola Potro, como estas? Te cuento que hasta hoy el poner un video como fonde me resulto espectacular. Pero ya no me aparece :( Podrias ayudarme, por favor? El nombre de mi blog es : CIENCIA Y RAZA. Gracias.

    ResponderEliminar
    Respuestas
    1. Hola, ¿has hecho un cambio reciente en tu plantilla? ¿cuál ha sido?

      Eliminar
  66. Hola potro un gusto, hace poco empece con un blog y he colocado un menu deslizable que usted publico y tambien he puesto un video con estos codigos suyos, elimine versiones viejas de jquery y todo va bien, ahora me gustaria que el video solo se vea en la portada y con unos codigos de que usted enseño para limitar donde aparecen o no las cosas todo va bien salvo que me deja de funcionar el menu deslizable porque comparte jquery con el video, o se al limitar con los codigos donde salir el video, el menu funcion solo en portado pero no en el resto de paginas, habra forma de solucionarlo, desde ya gracias.

    ResponderEliminar
  67. No se ha podido cargar la vista preliminar de la plantilla: Error al analizar XML, línea 546, columna 163: The reference to entity "control" must end with the ';' delimiter.

    ME SALE ESTE ERROR U.U AL QUERER PONER EL VIDEO

    ResponderEliminar
  68. que hago??? el video que puse sale muy pixeleado y quiero revertir el proceso

    ResponderEliminar
  69. Buenas a todos, ante todo un gran aporte me a gustado mucho de poner un video de fondo
    pero aora cuando pongo el video de fondo nada mas se el video no se me ve el contenido del blog, asi me puedes ayuadar potro que me a gustado mucho.

    ResponderEliminar
    Respuestas
    1. los dos ultimos punto debajo de body
      y luego antes de body
      creo que no lo ago bien
      por eso solo se me ve el video y no el contenido del blog?

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger