"Apagar las luces" para ver videos

3 de abril de 2012 228 comentarios ,


Este es uno de los scripts que más nos gustan a los que disfrutamos ver videos en la red, es un script de Janko y funciona con jQuery.

Se trata de "apagar las luces" para que todo lo que haya en la página se oscurezca menos el video, así no habrá otros elementos que nos distraigan mientras vemos el video y nos sentiremos como en el cine :)

Puedes ver un ejemplo aquí mismo, presionando el enlace que dice "Apagar las luces".
Cuando lo desees puedes presionar de nuevo el enlace y las luces se encenderán.


Para poner este efecto de "apagar las luces" en el blog, entra en la Edición HTML y antes de </head> pega 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[
$(document).ready(function(){
$("#oscuridad").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#oscuridad").toggle();
if ($("#oscuridad").is(":hidden"))
$(this).html("Apagar las luces").removeClass("turnedOff");
else
$(this).html("Prender las luces").addClass("turnedOff");
});
});
//]]>
</script>
Después agrega antes de ]]></b:skin> los estilos:
/* Apagar las luces
----------------------------------------------- */
#videoLuces {
position:relative;
z-index:102;
}
#apagador {
max-width:640px;
text-align:left;
position:relative;
height:25px;
display:block;
margin: 25px 0 0 60px;
}
.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(http://lh6.googleusercontent.com/-azJxijJlWX4/T3vT2giQqkI/AAAAAAAACWk/6wt4sBdcHEY/s16/luces-on.png);
background-repeat:no-repeat;
background-position:left;
padding: 0 0 0 20px;
outline:none;
text-decoration:none;
}
.lightSwitcher:hover {text-decoration:underline;}
.turnedOff {
color:#ffff00 !important;
background-image:url(http://lh4.googleusercontent.com/-J0U5xRqb7KU/T3vT2kcmUsI/AAAAAAAACWo/-VTwo42-Nj0/s16/luces-off.png);
}
#oscuridad {
background:#000;
opacity:0.7; /* Opacidad de la pantalla */
filter:alpha(opacity=70); /* Opacidad de la pantalla */
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}
Luego, antes de </body> agrega esto:
<div id='oscuridad'/>

Y por último, donde quieras poner tu video, ya sea en una entrada, o en un elemento HTML/Javascript usa este código:
<center>
<div id="apagador"><a class="lightSwitcher" href="javascript:void(0);">Apagar las luces</a></div>
<div id="videoLuces">
...Aquí el código del video...
</div>
</center>
Agrega donde se indica el código de tu video y listo. A disfrutar los videos con las luces apagadas.

Recuerda que el truquillo usa jQuery, así que si usas Scriptaculous o Mootools deberás aplicar un parche, y si usas otra versión de jQuery deberás usar sólo una.


228 comentarios en:

" "Apagar las luces" para ver videos "

  1. Genial. Voy a necesitarlo seguramente. Sos un genio hermano. Gracias.

    ResponderEliminar
    Respuestas
    1. Gracias a ti por tu visita Diego. Saludos.

      Eliminar
    2. Buen día te felicito por tan geniales efectos, eh utilizado algunos y me han funcionado de maravilla,soy diseñador de alta costura e ingeniero de sistemas con enfasis en seguridad informatica.

      Les invito para que miren mi blog y algo de lo que eh utilizado
      http://v-empiregothic.blogspot.com/

      Eliminar
    3. Buen dato aqui lo probe http://radioactivosweb.blogspot.com/2012/10/skyfall-cancion-de-adele-para-nueva.html# y es excelente

      Eliminar
  2. Gracias por ponerlo!
    Seguramente lo pondré en mi blog

    ResponderEliminar
  3. jeje es bueno. ya la he visto por ahi en alguna que otra pagina incluida youtube... lo probare. :)

    ResponderEliminar
    Respuestas
    1. Anda, pues ahora podrás decir que tienes algo como lo de YouTube :D

      Eliminar
  4. Hola, Potro, esto de las luces siempre le da un toque cool al blog. Yo ya publique un post con un script parecido a este en mi blog REDEANDO. Puedes verlo aqui:http://redeando.blogspot.com/2012/01/apaga-las-luces-de-tu-web.html
    Con este script tambien se 'apagaban las luces', pero con un efecto 'fade', ademas podias poner una luz intermedia suave. Saludos!!

    ResponderEliminar
    Respuestas
    1. Hola Johnny, ayer vi ese script, pero un problema que tiene es que después de apagar las luces no te deja hacer click en los enlaces ni en nada pues queda la capa superpuesta. Eso se puede arreglar, pero en plantillas del Diseñador el resultado no queda bien. Aun así siempre es una opción a considerar ;)

      Eliminar
  5. hola buen dia disculpa las molestias pero quisiera saber como puedo añadir una barra con imagenes de seliccion en la cabecera de mi blogg vi una web con eso en su blogg y pude ver el codigo del conteiner aqui lo dejo por favor ayudenme aqui tambien dejo mi correo total security.s.a@msn.com

    este es el codigo pero a mi no me sale bien diganme como debo hacerlo?
    Muchas gracias...aqui esta el enlace

    http://www.mediafire.com/?v9u9767qhk5mnu1

    ResponderEliminar
    Respuestas
    1. Buen día. En esta entrada está la explicación de ese carrusel de imágenes que has visto:
      http://ciudadblogger.com/2011/10/carrusel-de-imagenes-con-scriptaculous.html

      Eliminar
  6. ¡qué pasada! al final vamos a tener que usar nuestro blog como un cine jaja.

    ResponderEliminar
    Respuestas
    1. Pues tendrás que invitar las palomitas para que así sea :)

      Eliminar
  7. Hola potro al final decidi cambiarme de plantilla.... y ahora he quitado lo de leer automatico y va todo bien pero en todas las entradas pone "READ MORE" como hago para quitarlo...
    www.pequemundossims.blogspot.com

    ResponderEliminar
    Respuestas
    1. Seguramente se quedó parte del código por ahí, pero sino quieres complicarte sólo expande los artilugios, busca ese texto y elimínalo.

      Eliminar
  8. how about this?
    http://beben-koben.blogspot.com/2012/02/switch-css-mode-hacker-mode-blog-use.html

    ResponderEliminar
    Respuestas
    1. I was planning to do something like that to participate in Earth Hour :)

      Eliminar
  9. Ha! Utilisisimo Gracias Potro!, este blog cada dia más arriba!

    ResponderEliminar
  10. hola potro: ecxelente post una preguntica es algo te dioso tener que colocar el codigo en cada video que uno quiera que halla esta opcion no ahy manera de hacer como youtube que se apaga y se prende y deje solo los codigos embed de los videos? saludos parcero

    ResponderEliminar
    Respuestas
    1. Habría que estudiar la posibilidad, pero por ahora no se me ocurre nada.

      Eliminar
  11. Desde luego es que así da gloria ver los vídeos, por dios!!!....qué diferencia!
    Muchísimas gracias, Potro!
    Un beso muy enorme, mucho.

    ResponderEliminar
  12. Está muy chulo el efecto pero no me funciona exactamente.

    Cuando le doy a apagar las luces, efectivamente las luces se apagan pero el vídeo se desplaza hacia abajo.

    Saludos.

    Posdata: uso Chrome.

    ResponderEliminar
  13. ¿No hay una forma, que en vez de poner todo oscuro, solamente cambien a un tono más oscuro a la sidebar, el cuerpo, a todo?

    Era como lo hacía YouTube. YouTube no ponía todo negro, sino que ponía más oscura toda la página.

    ResponderEliminar
    Respuestas
    1. Sí, de hecho ya modifiqué el código CSS para que tenga transparencia ;)

      Eliminar
  14. Excelente truco aunque seria bueno que quedara permanente y no sea necesario ponerlo cdaa vez que se suba un video

    ResponderEliminar
  15. La misma pregunta de Daniel...porque el video se desplaza hacia abajo??

    ResponderEliminar
  16. Hola potro, excelente post. pero tengo una duda respecto a otro tema, tengo un blog de vídeos el cual es http://www.llenodevideos.com.ar/ pero la cuestión es que me gustaría que los vídeos en la home y etiquetas quedaran así como aquí http://videos.lopeor.com/ osea los vídeos en cuadritos pequeños y que al dar clik sobre ellos nos lleven a ver los vídeos. Sabra Dios y u como se hace eso, porque ni yo ni muchos lo sabemos. gracias men como siempre.

    ResponderEliminar
    Respuestas
    1. Hola Oscar David. Lo mejor es que uses una plantilla con esas características, por ejemplo Blogger Tube:
      http://btemplates.com/2009/blogger-template-bloggertube/

      Eliminar
    2. si men ya sabia de esa, pero esa planilla es muy fea, sabes como se puede pasar el script de esa plantilla a una nueva de blogger?

      Eliminar
    3. Nop, he visto la plantilla pero nunca la he usado ni "desmenuzado" para ver cómo funciona.

      Eliminar
  17. Hola, potro, pido disculpas si cometi o hice algo que te haya hecho enojar, he cambiado los botones de mi blog, para guardar la originalidad del tuyo.

    te quería hacer una pregunta importante, hay alguna posibilidad de contactar a blogger?
    y hacer unas preguntas sobre los últimos movimientos en el blog?

    espero que sí se pueda, Saludos!

    ResponderEliminar
    Respuestas
    1. ¿Por qué lo dices? o.O?

      Con Blogger el único medio de contacto es a través del foro de ayuda, de vez en cuando algún empleado lee las preguntas, pero tampoco hay una certeza de que te lean o te respondan :/

      Eliminar
    2. ha, es que había puesto unos botones similares a los tuyos en los comentarios. amm :/

      perdona por una pregunta más, abajo del formulario tienes una aviso bastante peculiar y que me alarmó un poco, SOPA fue aprobada?

      Eliminar
    3. No que yo sepa. El aviso es únicamente para evitar problemas futuros ;)

      Eliminar
  18. Muy bueno el efecto, muchas gracias Potro!!

    ResponderEliminar
  19. EXCELENTE!!!! muchas gracias, instalado y funcionando, muchas gracias de nuevo Potro

    ResponderEliminar
  20. Hola potro cuando entras en mi blog ahí un visor y quiero quitar la descrpicion como lo hago?
    mi blog es: pequemundossims.blogspot.com

    ResponderEliminar
    Respuestas
    1. Después de .fp-content{ agrega:
      display:none;

      Eliminar
  21. Hola! muchas gracias por todos los tutos que compartes con nosotros ^^ he usado varios.

    Pero no me funciona este, te dejo mi blog http://nessayavidoramas.blogspot.com/2012/04/online-love-rain-capitulo-3-traducido.html

    ojala puedas ayudarme ^^

    ResponderEliminar
    Respuestas
    1. Hola NessaYavi, el script de jQuery (el que dice 1.7.1) siempre debe estar antes que todos los demás, ponlo como se muestra en la entrada, antes del script que llama a las funciones.

      Saludos.

      Eliminar
  22. Hola potro, ayer mismo me preguntaba como hacer este efecto y lo estaba intentando en mi blog y hoy al entrar aqui veo que lo has puesto jaja me sirve mucho porque yo no pude jaja pero igualmente me ocurre un problema. Al darle click a "apagar las luces" se apagan las luces pero el video tambien y no puedo darle click a "encender luces" y ademas mi Slide deja de funcionar. Ya he hecho el truco de $ por Jquery etc.. y la version de Jquery igual pero nada. Si puedes ayudarme muchisimas gracias :D
    Un saludo!

    ResponderEliminar
    Respuestas
    1. Parece que te he leído la mente Loyal Life :)
      Necesitaría ver en cuál blog lo has puesto para poder mirar los códigos y saber qué puede ser lo que está ocurriendo.
      Saludos.

      Eliminar
    2. Si mira esque tenia la web en "Construcción" y por eso estaba intentando hacer cosillas jaja pero lo he quitado para que le eches un vistazo y haber si se te ocurre algo ,)

      http://loyalife.blogspot.com.es/
      Ahí esta el Slider que te comentaba
      ----
      http://loyalife.blogspot.com.es/2012/02/llego-el-verano.html
      y ésta es la entrada dónde está puesto el efecto "Oscuridad"

      Muchas gracias por tu ayuda :D

      Eliminar
    3. Potro voi a irte ahorrando trabajo jaja ya sé porque el video también queda "Apagado" porque los tengo con "transparency" para que el menú no quede por detrás. ¿Alguna forma de hacerlo? y luego al quitar esa transparencia de los videos, ya queda bien pero igualmente no puedo hacer click en "Encender las luces" :S y lo del slider supongo que es porque al ser una plantilla prediseñada con ese Slider no se cual es el código jajaja asique ya lo mirare para hacer el truco de $ por jQuery
      Un saludo y perdona por tanto testamento jaja

      Eliminar
    4. Pues si es por la transparencia entonces tendrás que dejársela.
      Veo que tienes dos veces la versión de jQuery, aunque es la misma quita una, la de este truco, y deja sólo la que tienes hasta arriba de toda la plantilla.

      Saludos.

      Eliminar
  23. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. El script ya incluye esa versión de jQuery, es la primera línea del código.

      Eliminar
  24. Muy bien Potro esto si funciona yo lo tenia usando hace tiempo en mi blog de PeliculasTube antes de que cerraran Megavideo

    ResponderEliminar
    Respuestas
    1. Funciona y muy bien como tú mismo puedes constatar :)

      Eliminar
  25. Hola potro tengo una duda el codigo que se debe poner al usar un video al usarlo en una entrada se pone en la edicion html si no me equivoco y donde dice aqui va el codigo que debo poner la url del video de youtube perdona tanta ignorancia pero soy nuevo en esto gracias por tu ayuda

    ResponderEliminar
    Respuestas
    1. Creo q ya solucione una parte de mi problema pero hoy tengo otro la opcion apagar las luces me funciona a la perfeccion pero al intentar encenderla no me deja me podrias ayudar xfa lo agradeceria este es el blog donde se encuentra mi problema http://tecnologiarim.blogspot.com/
      Gracias por la ayuda

      Eliminar
    2. Podría ser porque tienes varias versiones de jQuery:
      http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html

      Eliminar
    3. Potro aun asi no me funciona el mismo error no me deja encender las luces despues que se ha apagado y ya solo tengo una libreria de jQuery agradeceria tu ayuda perdona tanta molestia

      Eliminar
    4. Entré pero ya no veo que tengas algún video de ejemplo.

      Eliminar
  26. Hola Amigo! Glad to know this great site. Btw, i use this trick to my dummy blog before puting it to my original blog. It works properly, but a little problem occurs,.. my blog post area is bordered with webkit shadow css.. so the area is not fully light off-ed as seen in here http://muxstry.blogspot.com/2012/04/kingdom-of-heaven-layat-tancep.html

    Have any suggestion, Bro?? God Bless you.

    ResponderEliminar
    Respuestas
    1. Hi MUXLIMO, I just visited your blog but it says that the blog is open to invited readers only.
      Thank you for you comment.

      Eliminar
    2. Arggh..!! Im very sorry, Brother.. try this one:http://pojoktauhid.blogspot.com/ gracias in advance, Mr. Colt :)

      Eliminar
    3. Delete all z-index of your template (except the z-index of this code), once you do that, the trick will work properly.

      Ps. "Mr. Colt" sounds funny :P

      Eliminar
    4. Aha! yeah, it works great, Amigo! Gracias for the advise.

      {Ps. "Mr. Colt" sounds funny: P}
      ahahahah! then i would be El Potro next time :D :D :D

      Eliminar
  27. Pues voy a probar como me queda a mi. Cualquier cosa vengo a molestarte :)

    ResponderEliminar
  28. Hola Potro, me di cuenta de que en este post no te funciona ni el boton de "¿Te gusta Ciudad Blogger?" ni las flechitas de ir arriba y abajo (bueno, las flechitas si que funcionan pero no hacen el efecto de scrolling) Uso Google Chrome y nose si sera por eso.
    ¿Porque será?

    ResponderEliminar
    Respuestas
    1. Es porque yo inserté jQuery en la entrada para que funcionara el demo, por esa razón en esta entrada no funcionan esos botones ;)

      Eliminar
    2. Aah, es verdad, no me acordaba lo de los problemas con el jQuery, gracias por aclarármelo.

      Eliminar
  29. No se podría hacer que se oscureciese automáticamente al pinchar en el video sin tener que pulsar el botón de apagar las luces, y otra duda hay alguna forma de hacer que aumente el tamaño de los videos insertados al pulsar sobre ellos.
    Muchísimas gracias por el trabajo que haces con este blog

    ResponderEliminar
    Respuestas
    1. No Gonzalo, el plugin lo único que hace es sobreponer encima de todo una capa oscura, no interfiere con el video en sí, ni tampoco se puede modificar para que haga tal cosa.
      Saludos.

      Eliminar
  30. Hola Potro!

    Este artículo esta muy bueno y ya lo apliqué en mi blog, pero tengo un problema como siempre :/

    Cuando le doy click a apagar luces no cambia como el tuyo a encender luces sino que se queda siempre en apagar luces aunque ya esten apagadas.

    Mi blog es www.arteentorno.com

    Ojala puedas ayudarme y te agradezco de antemano.

    Saludos!

    ResponderEliminar
    Respuestas
    1. Perdon, te dejo mejor el enlace directo a la entrada donde esta añadido por si no lo encuentras:

      http://www.arteentorno.com/2012/02/arte-en-torno-mi-bella-genio_10.html

      Gracias!

      Eliminar
    2. No lo pude ver funcionar Victor, pero sí veo que te faltó cambiar un $ en el script. También tienes otros scripts de jQuery que necesitan que se les aplique el hack.

      Saludos!

      Eliminar
    3. Muchas Gracias Potro!
      Perdona mi ignorancia.

      Ahora funciona perfecto.

      Eliminar
  31. Hay alguna forma de poner el plugin automaticamente cada vez que se sube un video de youtube?

    Y alguna forma de redimensionar todos los videos de youtube para que aparecieren en todas las entradas del mismo tamaño sin ir uno a uno?

    Gracias Potro! eres un fenomeno

    ResponderEliminar
  32. Y después dejemos las velas encendidas y afuera las heridas, ¿no, Potro?

    ResponderEliminar
    Respuestas
    1. Pues ya depende de tu estado de ánimo; se me hace que andas medio romanticón.

      Eliminar
  33. My friend gave me this link yesterday. First, I'm not too success in practicing this tutorial, not success in language display. But it's good now. Thank you^^

    ResponderEliminar
  34. muchas gracias, a mi me sirve para los archivos swf. Aqui teneis el ejemplo: http://elrincondelosjuegosonline.blogspot.com.es/2012/04/tiro-al-vaso.html

    ResponderEliminar
  35. Buenas chicos! Nose que me pasara pero esque pongo el codigo y al darle a apagar las luces se me apaga todo, incluso el video, excepto el chat que tengo debajo del video. Si alguien podria ayudarme, se lo agradeceria mucho.

    ResponderEliminar
    Respuestas
    1. Hola JequeBusta, ¿en cuál blog lo has puesto?

      Eliminar
  36. jequetv.blogspot pero ya lo he quitado, ya que no me funciona.

    ResponderEliminar
    Respuestas
    1. Quitando todos los z-index de la plantilla deberá funcionar, pero, en esas plantillas con Aristeer no sé qué tan necesario sean esas propiedades. Si lo haces hazlo en un blog de pruebas primero, para que te asegures que quitando todas esas propiedades todo sigue funcionando bien.

      Eliminar
  37. Hola queria saber si se puede abrir la pagina y que ya esten las luces apagadas por defecto, si es asi como se hace ya intente cambiar donde dice javascript(0) a (1) pero sigue igual, saludo

    GRACIAS POR TU AYUDA

    ResponderEliminar
  38. oye amigo me puedes decir a que te refieres con codigo del video??? para apagar las luces

    ResponderEliminar
    Respuestas
    1. El código del video es el código de inserción que usas para mostrar tus videos, por ejemplo el código de inserción que copias de YouTube.

      Eliminar
  39. y también funciona con códigos HTML

    ResponderEliminar
  40. Wow Potro, que avanzado que esta tu blog, Felicitaciones :).

    Y yo tengo un Blog de Videos chistosos, y aplique el efecto, y funciona perfectamente.

    http://risatube.blogspot.com/

    ¿Me recuerdas, no? :)

    Saludos.

    ResponderEliminar
    Respuestas
    1. Qué gusto leerte nuevamente por acá ;)

      Eliminar
  41. amigo soy el de las luces que no prenden de nuevo
    solo pagan y no me deja volver a encender que pasara
    http://peligrosoft.blogspot.mx/
    este el blog de antemano gracias espero y me puedas ayudar

    ResponderEliminar
    Respuestas
    1. Hola Reach_Skyline, elimina todos los z-index de tu plantilla, menos los del código de esta entrada, con eso debe arreglarse, pero antes, haz un respaldo de la plantilla, por si algo no funcionará bien después de quitar todas esas áreas.

      Eliminar
  42. wow increible its WORK men muchisimas gracias funciona ya

    ResponderEliminar
  43. Hola Potro! Buenas tardes, después de darle mil vueltas no consigo que tu maravillosa creación funcione en mi blog, he revisado las posiciones de los códigos expandidos en la plantilla de artilugios y he quitado una versión antigua de JQuery y alguna que otra que tenia repetida. He copiado el código en una de las entradas dónde tenía un video de YouTube y al darle apagar la luz ni se inmuta la página, ¿podrías ayudarme? Muchas gracias Potro!
    the-english-room.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola Saleta, como usas Scriptaculous debes aplicar un hack, al final de la entrada viene el enlace que explica cómo hacerlo.
      Saludos.

      Eliminar
  44. Guauuu Potro! IN-CRE-Í-BLE, ¿te han dicho alguna vez que eres un máquina?? Pues te lo digo yo :) Problema resuelto! Muchas gracias por tú tiempo y tú atención.
    Saludos!!!

    ResponderEliminar
    Respuestas
    1. Por nada Saleta, un placer poder ayudarte, buen inicio de semana!

      Eliminar
  45. Men Eres De lo Mejor Tus consejos ayudan en Mucho Men...Gracias :D

    ResponderEliminar
  46. hola potro no me sirvio suvi un video de mi ordenador un video mio, lo tenia hay fui a html del video lo copie donde decia que cambiara hay donde ta en rojo y no sirvio no sale el video solo salia APAGAR LUCES osea que no sirve para video de mi ordenador sino videos de youtube o como funciona eso?
    gracias potro

    ResponderEliminar
    Respuestas
    1. Hola Augusto, un video que quieras que se vea en Internet debe estar también en Internet, no puedes poner un video de tu ordenador pues nadie podría verlo. Debes subirlo a la red a un hosting (pero entonces requerirás instalar un reproductor) o a un servicio de videos como YouTube.

      Eliminar
    2. mmmm ok potro muchisimas gracias :D
      sos mi idolo :D

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

    ResponderEliminar
  48. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Siempre que se mencione la fuente no hay problema :)

      Eliminar
  49. EAA ok potro :) sos grande :') muchas y mil gracias

    ResponderEliminar
  50. Gracias por el datoooooo!!!
    saludos,
    Facundo!

    ResponderEliminar
  51. Saludos Potro,este truco en mi plantilla no funciona,cuando doy click en apagar la luz no trabaja,mi plantilla tiene arriba de post un slider automatico para mostrar las ultimas entradas(Easy Slider) y es una plantilla de entrada resumidas estilo magazine(1)todos estos trucos publicado por ti.Se puede hacer algo para implementar este truco en mi blog que es de pelicula y me seria de gran utilidad
    Alfonso

    ResponderEliminar
  52. Saludos Potro,este truco en mi plantilla no funciona,cuando doy click en apagar la luz no trabaja,mi plantilla tiene arriba de post un slider automatico para mostrar las ultimas entradas(Easy Slider) y es una plantilla de entrada resumidas estilo magazine(1)todos estos trucos publicado por ti.Se puede hacer algo para implementar este truco en mi blog que es de pelicula y me seria de gran utilidad
    Alfonso

    ResponderEliminar
    Respuestas
    1. Debe ser porque tienes varias versiones de jQuery, sólo hay que tener una, la más reciente:
      http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html

      Eliminar
  53. no me funciona :(
    hice todos los pasos 2 veces, pero nada. Ni si quiera me sale la imagen de la lamparita. El link de "apagar las luces" cambia a "prender las luces" pero no las apaga ni las prende. que es lo que he hecho mal? :/

    http://aj-al-cuadrado.blogspot.com.es/p/1x01-piloto.html

    ResponderEliminar
    Respuestas
    1. Cuando has puesto el segundo código, el de los estilos, eliminaste la llave de cierre } del código que está arriba, por eso no te aparece el foco.
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Puede haber también un problema con otro script, pero primero resuelve eso para ver si es necesario algo más.

      Eliminar
    2. ya he puesto la llave de cierre, pero sigue sin funcionarme.

      Eliminar
    3. Aún no está corregido el problema, aun tienes el problema que te digo:
      .rightarrowclass{
      position: absolute;
      top: 6px;
      right: 5px;
      /* Apagar las luces
      ----------------------------------------------- */

      Eliminar
    4. Es verdad! Qué cabeza la mía.
      Muchas gracias Potro, ahora funciona perfectamente!
      Saludos des de España :)

      Eliminar
  54. Gracias Potro tenias razon era otra version de jQuery que tenia,todo esta perfecto,ahora te pregunto si es posible que apagar la luz y la lucesita se vea mas grande.
    Saludos
    pedro A

    ResponderEliminar
    Respuestas
    1. Hola Pedro, la imagen de la luz es eso, una imagen, bueno, dos, ambas se encuentran en el segundo código por si quieres cambiarlas.
      Saludos.

      Eliminar
  55. Saludos
    A mi me funcionaba ahorita no quiere ya lo cheque varias veces y nada que podría ser mi problema.

    ResponderEliminar
    Respuestas
    1. Pueden ser varias cosas, otras versiones de jQuery que uses, o quizá un tipo de script incompatible con este, o códigos mal colocados, etc. Las posibilidades son muchas, pero sin saber en cuál blog está puesto es imposible descifrarlo.

      Eliminar
  56. Saludos porque no puedo tener el carrosel de imagenes y la luz apagada de los videos me desactiva una de las dos. gracias por tu ayuda

    ResponderEliminar
  57. OYE TE QUIERO PREGUNTAR COMO AGO ESO CON IMAGENES DONDE DICE APAGAR LAS LUCES QUE APARESCA UNA IMAGEN Y QUE AL APAGARSE SE PONGA OTRA IMAGEN PRENDER LUCES

    ME ENTIENDES LO MISMO PERO CON IMAGENES PARA QUE LUSCA MAS BONITO INTENTE ALGO Y NO PUDE SERIA BUENO QUE AYUDES

    ResponderEliminar
    Respuestas
    1. Me temo que no, para ello tendrías que poner en el script el código de las imágenes y no admite esos códigos, sólo texto.

      Eliminar
  58. potro gracias este truco me sirvio pork tengo una web de videos y de pelicula mu atrativo este truo muchas gracias

    ResponderEliminar
  59. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Sólo lo he probado en Blogger, en otras plataformas no sé.
      Pd. Eliminé el comentario por el aviso que está al final de la página.

      Eliminar
    2. Hola potro.
      Gracias por el post. ¿Puedes decirme si se puede cambiar el enlace por una imagen o algo así?
      Gracias y hasta pronto

      Eliminar
    3. Me temo que no Juan, yo lo he intentado pero no he tenido resultados. Quizá lo que puedes hacer es cambiar la imagen del foco por la de la imagen que quieres.

      Eliminar
  60. Hola, podrías decirme como puedo cambiar de lugar el botón, me gustaría que quedara alineado con el vídeo, pero en lugar de esto me lo ponen más a la derecha ¿Como puedo hacer que el botón quede alineado con el extremo izquierdo del vídeo? Aquí te dejo mi entrada tal y como queda ahora: http://favoleartbook.blogspot.com.es/2012/07/teaser-misty-circus-3d.html

    ResponderEliminar
    Respuestas
    1. Hola, pon en 0 el 60px que está aquí:
      margin: 25px 0 0 60px;

      Eliminar
  61. AHi alguna opción de apagar las luces automáticamente cuando pinchen un vídeo que has colgado en blogger?

    ResponderEliminar
  62. Muy buen aporte, pero quisiera que la palabra "Apagar las luces" esté con color de letra blanca, podria brindarme el codigo, y muy buen blog brother (Y) aportas mucho.

    ResponderEliminar
    Respuestas
    1. En esta parte puedes cambiarlo:
      color:#ffff00 !important;

      Saludos.

      Eliminar
    2. Y si quiero que salga solo el foco ?. Gracias de antemano

      Eliminar
    3. Supongo que sería cuestión de que elimines esos textos tanto en el primer código como en el último.

      Eliminar
  63. Saludos Potro, este truco me servirá mucho para mi blog.
    Solo que tengo un problemita, tengo el chat chatango, y al darle clic en apagar luces el chat se muestra iluminado, osea normal.
    Gracias de antemano por tu respuesta.

    ResponderEliminar
    Respuestas
    1. Quizá tengas que ponerle un z-index negativo, o si es un archivo SWF una transparencia.

      Eliminar
  64. Guapo:

    Esto es aplicable a todos los vídeos del blog o solo a uno????

    ResponderEliminar
    Respuestas
    1. Para los que quieras, no es un sistema automático, sólo se lo aplicas a los videos que tú desees, cuando así lo necesites sólo usa en el video el último código.

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

    ResponderEliminar
    Respuestas
    1. Pusiste el script e jQuery UI, no el que se menciona en esta entrada, ponlo tal como está y mira si funciona.

      Pd. Eliminé tu comentario por el aviso que aparece al final de la página.
      Saludos.

      Eliminar
  66. Gracias por compartirlo. Tengo problemas para insertarlo en mi blog porque no veo en html los comandos (xej < /head >) que das como referencia para introducir cada script.
    Porque se ha de introducir en cada artículo publicado con algún vídeo, verdad?
    Alguna sugerencia?

    Gracias nuevamente,
    Empar.

    ResponderEliminar
    Respuestas
    1. Hola Empar, los primeros códigos búscalos usando las teclas CTRL + F así te será más fácil encontrarlos, todas las plantillas de Blogger tienen esos códigos.
      El último código es el que se pega en la entrada, ahí sí se pone el video que quieras publicar.

      Saludos.

      Eliminar
  67. Olá! Coloquei no meu blog e deu certo, porém, depois que coloquei esse script o script do meu islide não pega, tu sabe por que?

    ResponderEliminar
    Respuestas
    1. Puede ser que tengas otra versión de jQuery, sólo debes tener una versión:
      http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html

      Eliminar
  68. Gracias, es genial. Aunque yo desde hace tiempo lo tengo, no en blogger, si no en mi navegador, en Opera eso está como extensión y sirve especialmente para youtube, aunque también puedes configuración para otras páginas de videos por medio de la detección de flash, y puedes modificar la opacidad.

    Buen aporte, me encanta ver videos así.

    ResponderEliminar
    Respuestas
    1. Hay extensiones igual para Chrome que lo hacen, no sé si también para Firefox (supongo que sí), la ventaja aquí es que el usuario no necesita instalar nada en su navegador ;)
      Saludos.

      Eliminar
  69. No lo entiendo... lo de la Edición y eso:(

    ResponderEliminar
    Respuestas
    1. Hola Maria, sólo tienes que entrar a Plantilla > Edición de HTML y pegar los códigos donde se indica.

      Eliminar
  70. Por favor, ¿cómo se puede poner un vídeo "directamente" sin que tenga que darle al enlace para verlo? :-/

    ResponderEliminar
    Respuestas
    1. En YouTube debajo del video verás la opción de Compartir y luego Insertar, ese es el código que puedes usar en tus entradas.

      Eliminar
  71. No puedo no me sale, no se que estoy haciendo mal...
    Una pregunta ¿puedo poner la opción "apagar luces" sin que ponga vídeos?

    ResponderEliminar
    Respuestas
    1. Sin saber en cuál blog lo has puesto me es imposible ayudarte.

      Eliminar
  72. Hola Potro:Es estupendo!!!Pero no se oscurece del todo.¿Será por tener el fondo negro?O no sé a que será debido.
    Espero tu explicación.Gracias
    http://localizarecursos.blogspot.com.es/p/videos.html

    ResponderEliminar
  73. Hola de nuevo Potro:Ya hice lo que me indicas pero no se oscurece.No funciona.Si quieres echarle un vistazo, te dejo la página
    http://localizarecursos.blogspot.com.es/p/videos.html
    Un saludo

    ResponderEliminar
    Respuestas
    1. Yo ya lo veo funcionando, tarda un poco en cargar pero ya funciona.

      Eliminar
  74. Muchísimas gracias Potro,es que tarda en cargar como dices,quedó estupendo.

    ResponderEliminar
  75. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. No Kevin, el script no tiene esa opción de activarse con el "play".
      Pd. He eliminado el comentario por el aviso que está al final.
      Saludos.

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

    ResponderEliminar
    Respuestas
    1. Puede ser porque se lo has aplicado a varios videos en la misma página, prueba aplicándoselo sólo a un video.

      Pd. He eliminado el comentario por el aviso que está al final.
      Saludos.

      Eliminar
    2. Hola!!! Nada, no hay forma. Si te diste cuenta, no son videos, son canales de TV. Yo lo probe en los videos de YT y funciona perfectamente. Por favor ayudame, please.

      Eliminar
    3. Es que en realidad da igual si es un video, una transmisión, una imagen, etc. Ahora mismo acabo de probar el mismo iframe al que se lo aplicaste en la misma plantilla y me funciona sin problema, así que quizá sea algo que pusiste en tu plantilla, o alguna otra cosa. Prueba en otro blog y mira qué resultados te da.

      Eliminar
  77. Gracias amigo. Dejame revisar la plantilla. Un beso

    ResponderEliminar
  78. Sabes que?? Creo que tiene que ver con la plantilla. Me puedes dar una sugerencia??? Gracias

    ResponderEliminar
    Respuestas
    1. No sé decirte, yo lo probé en la misma plantilla que tienes y funcionó, quizá sea por alguna modificación que le hiciste.

      Eliminar
  79. Disculpame, me acorde que yo le hice un cambio al codigo HTML, lo revisare. Gracias por el aporte y por estar pendiente. Buenas noches

    ResponderEliminar
  80. ahhww!! no me sale
    mira http://webpruebasdemariajose.blogspot.com/ ese es el blog, la verdad no se en que estoy mal :/.
    Saludos

    ResponderEliminar
    Respuestas
    1. En donde dice "...Aquí el código del video..." debes poner no la URL del video, sino el código para insertar.

      Eliminar
  81. Tengo un problemita, al apagar las luces se oscurece toodo, hasta el video, y los controles de este (como reproducir, pausa, volumen, ect) con funcionan.. Aqui mi blog:
    http://noticias-gm.blogspot.com/p/videos.html
    Que debo hacer?

    ResponderEliminar
    Respuestas
    1. Podría ser porque el código de tu entrada está lleno de etiquetas SPAN, incluso el video está dentro de varias etiquetas de ese tipo. Mira tu entrada en la pestaña HTML para que veas todas esas etiquetas que tienes, quítalas, que quede limpio el código y mira si eso lo resuelve.

      Eliminar
  82. Disculpa, yo soy nueva en esto, estoy haciendo mi primer blog, para una tarea que me dejaron de mi escuela sobre la Ofimática, pero tengo una duda creo que se reiran & es que al referirte al codigo del video hablas de la dirección & si ya lo puse el video en una entrada antigua no importa? :/ disculpa & gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Hola susi, el código del video es un código que te da YouTube para insertar el video en alguna página, puedes obtenerlo dando click en "Compartir" y luego en "Insertar vínculo".

      Eliminar
  83. Gracias por ponerlo,gracias a lo que subes mi blog esta genial

    ResponderEliminar
  84. ei potro!! genial el bloog!!!
    pero tengo un problemilla, que no va. A la hora de clickar donde pone "apagar luces" las luces no se apagan. te dejo el enlace del blog, en la ultima entrada:
    http://apurbatdenetarik.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola Laura, tal vez debas cambiar esto:
      $(document).ready(function(){
      $("#oscuridad").css("height", $(document).height()).hide();
      $(".lightSwitcher").click(function(){
      $("#oscuridad").toggle();
      if ($("#oscuridad").is(":hidden"))
      $(this).html("Apagar las luces").removeClass("turnedOff");
      else
      $(this).html("Prender las luces").addClass("turnedOff");
      });
      });


      Por esto:
      jQuery.noConflict();
      jQuery(document).ready(function(){
      jQuery("#oscuridad").css("height", jQuery(document).height()).hide();
      jQuery(".lightSwitcher").click(function(){
      jQuery("#oscuridad").toggle();
      if (jQuery("#oscuridad").is(":hidden"))
      jQuery(this).html("Apagar las luces").removeClass("turnedOff");
      else
      jQuery(this).html("Prender las luces").addClass("turnedOff");
      });
      });

      Eliminar
    2. sigue sin funcionar, ¿cual puede ser el motivo?

      Eliminar
    3. No veo esta parte en el código que es fundamental:
      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

      Eliminar
  85. Ya lo hemos puesto pero nada, sigue sin funcionar.

    ResponderEliminar
    Respuestas
    1. No va ahí, mira bien el código de la entrada.

      Eliminar
  86. potro a mi tampoco se me apagaba la luz cuando le daba y cambie eso q le dijiste a laura y me funciono a la perfeccion,muchas gracias

    ResponderEliminar

Los comentarios están siendo moderados y serán publicados una vez que hayan sido revisados por un administrador.
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.

 
Ir Arriba Ir Abajo
I Ciudad Blogger