Algunas plantillas son un poco ajustadas y al poner videos estos se salen del post, y aunque podemos editar el tamaño de la pantalla del video en ocasiones el video no se aprecia igual que en su tamaño original, así que una buena solución para esto es abrir los videos en una ventana emergente, o sea en una ventana PopUp.
¿Cómo funciona? Lo que haremos será sustituir el video por una imagen que al darle click se abra una pequeña ventana para ver el video.
¿Cómo funciona? Lo que haremos será sustituir el video por una imagen que al darle click se abra una pequeña ventana para ver el video.
Sólo usa este código dentro del post:
<a title="Ver video" href="javascript:void(0);" onclick="window.open('http://www.youtube.com/v/DnzuKKG6-AA&autoplay=1', 'popup', 'left=390, top=200, width=425, height=344, toolbar=0, resizable=1')"><img src="http://dl.getdropbox.com/u/647003/CiudadBlogger/Iconos/playvideoicon.gif" title="Ver video" /></a>
Ahora cambia la URL del video de YouTube, ten en cuenta que sólo debes cambiar la última parte de la dirección, o sea las letras que están en rojo, de lo contrario se abrirá toda la ventana de YouTube. Fíjate en este ejemplo:
Este código está programado para que el video se reproduzca automáticamente al abrirse la ventana, si deseas que se reproduzca hasta que el usuario le de click en Play entonces elimina esta parte: &autoplay=1
Puedes cambiar la URL de la imagen por otra, yo he hecho esta y puedes usarla si gustas. Para ver cómo queda haz click en la imagen.
Puedes cambiar la URL de la imagen por otra, yo he hecho esta y puedes usarla si gustas. Para ver cómo queda haz click en la imagen.
ACTUALIZACIÓN (05/jul/2010):
Este código ya no funciona para Internet Explorer, únicamente para el resto de los navegadores.
Interesante truco bro!
ResponderSuprimirUn abrazo!
Ademas se carga mas rápido la página, ya que es mas sencillo cargar un imagen que el reproductor de Youtube!
ResponderSuprimirTienes toda la razón. A los que tienen el blog saturado de videos les va a hacer más ligera la carga de la página.
ResponderSuprimirMi blog tambien esta saturado y eso que no tengo videos. jajaja. A mi también me va a servir.
ResponderSuprimirGran Potro.
ResponderSuprimirYa eres, a esta altura, mi gran salvador para el blog.
Maestro:
Nuevamente necesito de tu ayuda.
Necesito colocar en la sidebar un video que tengo alojado en un servidor "X". No he encontrado un código para algún reproductor "sencillo" y acorde a los tonos de mi blog, además que sea configurable en ancho y alto.
Como lo puedo hacer?...
San Potro, porfavor, dame una solución.
Saludos y agradecido como siempre.
Jpz.-
Me gusta lo sencillo del reproductor que generas en este post.
ResponderSuprimirComo puedo cambiar el video de Youtube (en este caso) por algun video personal o el que yo quiera a excepción de youtube?.
Se puede?.
Saludos maestro.-
Hola Jpz,
ResponderSuprimirGracias por tus comentarios, pero estoy lejos de ser un maestro y más a un de ser un santo, jaja.
Podrías hacerlo con este truco sólo que en lugar de poner la URL de la emisora pones la URL del video, aumenta el height a 245 o a la medida que quieras para adaptarla al tamaño que quieres.
Los colores del reproductor son los mismos por default pues los provee Windows Media. Haz algunas pruebas pues no todos los navegadores aceptan todos los formatos de video.
Saludos.
Gracias nuevamente tu blog es muyyyyyyyyy bueno
ResponderSuprimir=)
Me da gusto que te sea de ayuda.
ResponderSuprimirSaludos!
¡Hola!
ResponderSuprimirTe doy las gracias por ayudarme. ¿Puedes contestar otra pregunta? ¿Se puede abrir un reproductor de música en una ventana emergente (Windows Media Player, por ejemplo)? ¿Se puede con otros reproductores? ¿Cuáles? Apreciaré cualquier comentario tuyo.
Discúlpame las molestias. Prometo no volver a molestarte, amigo.
Chao. Cuídate.
Hola Eduardo,
ResponderSuprimirNo es ninguna molestia, por el contrario, se vuelve más enriquecedor en blog con las preguntas.
He tenido problemas con el script que hace funcionar la ventana emergente para el reproductor de Windows Media Player, deja reviso el código y hago unos ajustes y en cuanto esté listo hago un post con la explicación.
Saludos.
muy buen dato y sabes lo enlace con un codigo para resaltar una imagen y funciona de maarvillas
ResponderSuprimirGracias MAN
Kuoves
armandoequipos.ya.st
Hola kuo,
ResponderSuprimirMe alegra que te haya funcionado, con imágenes también se ve genial.
Saludos.
hola, que pena pero apenas estoy empezando a trabajar con blogs, cual es el post donde se pega el codigo, gracias y disculpa
ResponderSuprimirHola Ing. Jhon Mauricio Ramirez Herrera,
ResponderSuprimirTodos empezamos sin saber, no te preocupes.
El código se pega donde escribes tus entradas (artículos o post), ahí pegas el código sustituyendo la dirección del video de YouTube.
Saludos.
potro, no se por que pero realice el truco en la entreda del post y una vez publidado salio todo el código HTML, como lo muestras y la imagen de PLAY... además de...LEER MÁS
ResponderSuprimirno me salio como en tú ejemplo mostrando solo la imagen PLAY, que hise mal???
atte;
Ronald
www.pasionportemuco.tk
Hola RonnyTemxcano,
ResponderSuprimirCuando pongas el código en la entrada cerciórate que estés en la ficha Edición de HTML y no en la de Redactar, al igual si estás usando el Leer más revisa que el código no esté interfiriendo en alguna etiqueta del código de Leer más.
Saludos.
gracias potro era justo mi error lo coloque en Ficha de redactar, gracias
ResponderSuprimirhola, Potro
ResponderSuprimirfelicitarte primero por el contenido de tu sitio, de gran ayuda para los blogers sin duda.
Instalé este truco en uno de mis sitios, con Mozilla funciona correctamente per con Explorer los vídeos no se reproducen...
Un abrazo.
Hola albert serrano garcía,
ResponderSuprimirDebe ser alguna configuración de seguridad del navegador. Pero que no te extrañe que la mitad de las cosas no funcionen con Internet Explorer, ya sabes cómo es de "eficiente" ese navegador.
Saludos.
simplemnet lo que anda buscando ..jejej
ResponderSuprimirpotro como siempre..haciendonos la vida facil y sobre todo Feliz...
Ojalá todos los navegadores funcionaran igual, eso sí nos haría la vida más fácil, jaja.
ResponderSuprimirSaludos!
Este comentario ha sido eliminado por un administrador del blog.
ResponderSuprimirEl comentario anterior ha sido identificado como SPAM y se ha eliminado de la entrada.
ResponderSuprimirHola, como estan?¿?
ResponderSuprimirEspero que bien, solo les queria hacer una pregunta,lo que pasa es que utilice este codigo (el del video en ventana emergente) en mi web y pues me esta dando problemas de compatibilidad con algunos navegadores y quisiera saber si alguien me puede a atydar a resolver este problema, gracias.
Nota:La pagina en la que use este codigo es www.cranfanberries.club.officelive.com
Hola "Cranpepe",
ResponderSuprimirEl código funciona bien en todos los navegadores excepto en Internet Explorer, pero ya sabemos que casi nada funciona en ese navegador, así que al menos con este código no hay nada que hacer :(
Saludos.
hola y si en ves de Imagen quiero colocar un texto como le hago
ResponderSuprimirEntonces sólo cambia esta parte del código por el texto que quieres:
ResponderSuprimir<img src="http://dl.getdropbox.com/u/647003/CiudadBlogger/Iconos/playvideoicon.gif" title="Ver video" />
Saludos.
muy bueno el truco ese potro, pero ahora una pregunta .. se puede hacer que con cualquier cosa q vos quieras se abra una ventana emergente? .. por ej si yo quiero poner una imagen en tamaño chico y q cuando clickee se me abra una ventana nueva (pop up) y que se vea la imagen en su tamaño normal?
ResponderSuprimirClaro, sólo sería modificar el tamaño de la ventana (width y height) al tamaño de la imagen que tienes, además claro de poner la URL de la imagen en lugar de la del video.
ResponderSuprimirSaludos.
Hola Potro
ResponderSuprimirCon lo referente a videos, me gustaria saber como empagino varios videos, como en las entradas.
Te dejo una pagina para que veas a lo que me refiero
www.maspublicidadymarketing.com (en la parte superior derecha -Videos destacados-)
La verdad es que ando buscando algo similar pero no lo encuentro, a ver si haces un post sobre este truco.
Gracias
Esta opción de JMiur creo que te vendría bien:
ResponderSuprimirhttp://vagabundia.blogspot.com/2009/10/incrustar-multiples-videos-de-youtube.html
Saludos.
Gracias potro
ResponderSuprimirbuenísimo, gracias!
ResponderSuprimirGracias a ti por tu visita :)
ResponderSuprimirespero tu visita en mi sitio aca te dejo el link dejame el visto bueno http://exclusivojuegosparapc.blogspot.com/
ResponderSuprimirComo se puede utilizar el codigo para hacer pop up un chat de Xat en blogger? ya que cada que se va a una nueva entrada se reinicia el chat y es un gorro.
ResponderSuprimirSi el chat tuviera un URL donde carga se podría, pero el chat es un archivo flash y con este código no se puede.
ResponderSuprimirno funciona en win7 .... internet explorer solo abre el popup pero no reprodiceo y mesale un mensage que me dise abrir, guardar o cancelar pero en firefox si me funciona ayuda por favor ... gracias
ResponderSuprimirDesde hace unos meses ya no funciona en Internet Explorer, no es por el gadget o alguna configuración sino que ese navegador no acepta esos comandos.
ResponderSuprimiraaa ok muchas gracias por su tiempo q paginas mas buena la unica que me contestan de verdad felicitasiones ;)
ResponderSuprimirTe agradezco tu comentario :)
ResponderSuprimirSaludos, antes que nada tu post esta super recontra bueno, tengo problemas con este truco ya que en internet explorer 8, me abre la ventana del video pero no reproduce nada, hay algo mas que tenga que hacer para que me funcione?, ya que este truco esta demasiado bueno y lo quiero implementar en mi blog. Saludos, espero tu respuesta.
ResponderSuprimirMuy buenos dias, Saludos nuevamente amigo, tambien me gustaria saber como coloco un texto en el enlace en vez de la imagen (ver video).
ResponderSuprimirLamentablemente en Internet Explorer ya no funciona este truco, sólo para los demás navegadores.
ResponderSuprimirPara poner el enlace sólo elimina esta parte:
<img src="http://dl.getdropbox.com/u/647003/CiudadBlogger/Iconos/playvideoicon.gif" title="Ver video" />
Y en su lugar agrega el texto que quieres.
Saludos.
HOLA POTRO UN SALUDO...TE QUERIA PREGUNTAR A QUE SE DEBE QUE CARGUE LOS VIDEOS Y EN MOZILLA SE CARGAN BIEN EN EL BLOG Y EN EXPLORER QUEDA UN ESPACIO EN BLANCO Y NO CARGA http://www.angularestereo972fm.blogspot.com/ GRACIAS POR TU AYUDA
ResponderSuprimirHola Angular Estereo 97.2 FM,
ResponderSuprimirEn Internet Explorer ya no funciona el código :(
Este comentario ha sido eliminado por el autor.
ResponderSuprimirMuy buena Potro.
ResponderSuprimirUna pregunta, ¿solo funciona con videos de youtube?
y si no es asi como seria el codigo para el video de esta pagina
http://tu.tv/videos/joga-bonito-cristiano-ronaldo
Ese sitio no ofrece una ID para sus videos por lo tanto no se podrían usar para este código.
ResponderSuprimirSaludos.
Saludos
ResponderSuprimirquisiera saber si en blogger se puede poner una ventana de estas que se abra al cargar la pagina, mi blog es www.lawebadeloso.blogspot.com y la pagina q kiero mostrar la tengo guardada en un sitio de un amigo....
si no es mucha molestia me podrian dejar tambien la respuesta en un comentario en mi blog...
gracias por toda la ayuda de este sitio...
Mira esta entrada y luego lee el comentario #9
ResponderSuprimirGracias de antemano por la respuesta Podrias decirme como se puede arreglar el codigo html para que lo puedan ver en Internet Explorer ese tema de los videos en un pop up? ya sabes que con esto de que hay gente que no sabe de navegadores, como yo que no se nada de HTMl.. o cosa parecida... te agradezco la respuesta de antemano.
ResponderSuprimirLamentablemente no es algo que nosotros como usuarios del navegador podemos hacer pues es simplemente que Internet Explorer no reconoce esos códigos.
ResponderSuprimirQuizá quieras considerar usar Shadowbox que es un sistema más elegante y que funciona en todos los navegadores.
Saludos.
potro te hago una pregunta queria crear una ventana popup pero no quiero poner un video o una imagen quiero que cuando se habra la ventana tena codigos html que se visulicen osea quiero poner por ejemplo un codigo como este
ResponderSuprimir<a href="http://www.4shared.com/ref/17594612/3"><img src="http://www.4shared.com/affiliate/images/b2.gif" alt="Join 4Shared Now!" /></a>
no se si me entendes si me podes ayudar estaria muy bueno.
Sigue los pasos de esta entrada que es para poner música en ventanas pop up sólo que en lugar de que incluyas el código del reproductor incluye el código HTML que quieres mostrar.
ResponderSuprimirMuchisimas gracias potro!!
ResponderSuprimirHola, y su quiero que en lugar de imagen sea texto como link, que le den clic y se abra el video ¿como le hago? gracias.
ResponderSuprimirSólo elimina esta parte del código:
ResponderSuprimir<img src="http://dl.getdropbox.com/u/647003/CiudadBlogger/Iconos/playvideoicon.gif" title="Ver video" />
Y en su lugar escribe el texto que quieras.
Saludos.
¡Muchas gracias!... y otra pregunta, ¿funciona igual en otros navegadores? lo prove en explorer y no funciono, yo uso firefox.
ResponderSuprimirNo. Como se menciona al final de la entrada ya no funciona para Internet Explorer.
ResponderSuprimirPotro... tienes alguna solución para los videos restringidos que solo se pueden ver en youtube?
ResponderSuprimirUn saludo.
Ya lo solucione, copie y pegue el link del pop out de youtube
ResponderSuprimirhttp://www.youtube.com/watch_popup?v=BxJoqMfgiPg&vq=medium#t=50
saludos
Ingeniosa solución :D
ResponderSuprimirMis Amigos lo probé con un canal de Livestream, que queria poner en mi blog, y Funcionó de maravilla y ademas en IE9
ResponderSuprimirVisitenme y me cuentan que les parece:
ResponderSuprimirhttp://palabra-devida.blogspot.com/
Excelente el tutorial mi buen Potro lastima que solo pude con videos de youtube y no me dejo con los videos que tengo guardados en Dropbox, no sabes porque?
ResponderSuprimirSí debe funcionar, ¿te aparece algún error?
ResponderSuprimirHola Potro, Muchas gracias por postear semejante codigo :), tengo una consulta, quiero utilizar una imagen propia para que al clickearla puedan ingresar al video, como hago eso?? :( Gracias!!!
ResponderSuprimirHola,
ResponderSuprimirSólo cambia en el código esta URL:
http://dl.getdropbox.com/u/647003/CiudadBlogger/Iconos/playvideoicon.gif
Y en su lugar pon la URL de la imagen que quieres.
Saludos.
Hola Potro, sabes como abrir en ventana los propios videos que se suben directamente a un articulo de Blogger?
ResponderSuprimirUn abrazo.
Me temo que no es posible ya que el código que nos arroja no corresponde al de una página, y para poder meterlo dentro de un popup necesitaríamos que esté dentro de una página, como sucede en YouTube.
ResponderSuprimirAlgo me temia Potro, ya que he hecho todo tipo de pruebas con el dichoso código que nos da y no ha habido manera de sacar nada en limpio, bueno que le vamos a hacer. Gracias de todas maneras.
ResponderSuprimirUn abrazo.
buen aporte.. se me hizo mas facil todo..
ResponderSuprimirEs que está re fácil :D
ResponderSuprimirmuchas gracias!
ResponderSuprimirMuy buen aporte, es justo lo que necesitaba
tuve unos problemas pero logre arreglarlo
Y nuevamente muchas gracias :)
Gracias a ti por tu visita!
ResponderSuprimirmmm A Mi me Falla. :| Tengo que publicarlo en edicion Html. Bien hasta ahi todo ok. Lo Publico pruebo anda. Voy a editar para agregar mas cosas. publico y no anda. :| No se a que se debe.
ResponderSuprimirCuando lo pongas ponlo en la pestaña Edición de HTML, pero NO cambies a la pestaña Redactar, déjalo ahí en HTML porque si cambias de pestaña posiblemente se pierda la estructura del código.
ResponderSuprimirse puede poner otra cosa? q' no sea video osea un codigo HTML?
ResponderSuprimirSí, pero tendrías que hacer una página HTML, esa página sería la que se abra al hacer click, y es esa página la que tendría el código que quieres.
ResponderSuprimirHey potro que debo hacer para que la ventana pop Up solo de 2 opciones: minimizar y cerrar solamente
ResponderSuprimirGracias !
Ninguna hace eso, como se abre una ventana nueva ya no tienes poder de hacer nada con ella pues tú ya te encuentras en una ventana distinta.
ResponderSuprimirok gracias, crei haber visto algo por ahi
ResponderSuprimirGracias !
ami no me funciono u.u puse el código en la entrada pero al momento de redactar desaparece una parte y solo queda la imagen img src="http://dl.getdropbox.com/u/647003/CiudadBlogger/Iconos/playvideoicon.gif" title="Ver video" /> pensé que era normal pero cuando publique no funciona igual . te dejo el link para que lo mires y me des una mano potro http://your-dark.blogspot.com/2011/10/nuevo-videoclip-musical-de-coldplay.html
ResponderSuprimirCuando usamos scripts en las entradas no debemos cambiar a la pestaña Redactar:
ResponderSuprimirhttp://ciudadblogger.com/2009/11/como-poner-los-codigos-correctamente-en.html
gracias potro eres un genio, pero hay otro problema abre la ventana pop - up pero el vídeo nunca carga, uso google chrome
ResponderSuprimirYo lo veo funcionando bien Yusmer, igual uso Chrome.
ResponderSuprimirhola, ¿hay alguna forma de poder ver solo el contenido que quieras en una ventana emergente? por ejemplo, si yo quiero que en la ventana se vea solo un texto que esta en el centro de la pajina, ¿se podria hacer? como si fuera un iframe pero en una ventana emergente. No se si me he explicado muy bien, espero que se entienda.
ResponderSuprimirMuchas gracias y un saludo
Sí, pero tendrías que crear un documento HTML, es decir, hacer una mini página Web y ahí poner el contenido que quieres mostrar; esa página sería la que pondrías en el código y es la que se abrirá en lugar del video.
ResponderSuprimirUf, demasiado complicado para mi, ¿no sabras de algun tutorial para hacer eso? Yo creia que añadiendo algo como:
ResponderSuprimirstyle="width:970px; height:800px; margin-left:-197px; margin-top:-335px;" se desplazaria el contenido de la pagina hasta el punto que yo quisiera.
Gracias por tu ayuda y un saludo.
Quizá no te he entendido. Modificando esos valores sí se desplaza la ventana emergente al lugar que quieres, pero el contenido que abrirá seguirá siendo el del video. Si lo que quieres es que la ventana abra otra cosa que no sea un video entonces sí debes hacerlo que te mencionaba.
ResponderSuprimirPotro una pregunta, este codigo se puede usar también como gadget? en un elemento html? graciass
ResponderSuprimirPor supuesto Antoxwoman, puedes ponerlo en un gadget HTML/Javascript y funcionará de igual manera :)
ResponderSuprimirGracias Potrito!!!! tu siempre tan solidario :) bexototes :D
ResponderSuprimirHola Potro gracias a ti ya he puesto la musica en ventana emergente, pero me gustaría que fuese automático, que no hubiera que pinchar en él. He probado a poner autoplay como he leido en tu página pero no consigo nada. Mi reproductor es Mixpod. Te paso el enlace de mi blog a ver si tienes un ratejo y me ayudas. Gracias.
ResponderSuprimirhttp://deoropesaafuenlabrada.blogspot.com/
Hola Car-Lan,
SuprimirNo sé si Mixpod tenga la opción de autoplay, en la página de ese reproductor puedes investigar en las opciones para ver si es posible ponerlo.
Saludos.
Hola Potro,hay alguna manera de que la pop-out permanezca visible al navegar por otras paginas??
ResponderSuprimirHola Suzanne, como se trata de una ventana emergente debe permanecer visible, a no ser que tu navegador no te lo permita. Yo por ejemplo uso Chrome, abro la ventana emergente, mientras se está reproduciendo el video puedo cerrar la pestaña donde hice click y seguir navegando, y el video continua sin problemas :)
SuprimirPues la verdad,he probado con todos los navegadores y en ninguno me la mantiene visible,y es muy raro porque la primera vez que visité el post y le dí a tu video,si que se mantenía visible pero a partir de ahi ya nada.De todas formas lo he puesto en un blog de prueba,si le quieres echar un vistazo te lo agradeceria para ver si es mi config la que falla.. http://granhermano13chatroom.blogspot.com/
SuprimirMe funciona perfectamente Suzanne; por ahora sólo he podido probarlo en Chrome y Firefox, pero en ambos la ventana permanece visible, aun si abro más pestañas, o si cierro tu blog.
SuprimirOk gracias Potro,a mi es que me pasa con tods las ventanas emergentes,no se que configuración extraña tendré,uso windows 7 de Ultimate original y no he tocado nada..quien sabe.Bueno mientras le funcione a los demás yo encantada.Otra vez,gracias por la ayuda,este blog es excelente,sigue asi,un saludo.
SuprimirDe cualquier forma si puedes pregúntale a una persona más, digo, no vaya a ser que sólo a mí me esté funcionando bien, aunque me parece que al menos aquí nadie ha tenido problema con ello.
SuprimirUn saludo.
el codigo esta muy bueno pero podria pornerle publicidad de google adsense cuando abre ejemplo: publicidad + video de youtube +publicidad de arriba abajo
ResponderSuprimirLa publicidad de AdSense está prohibida añadirla no sólo en ventanas emergentes, sino también sobre otros elementos como videos o gráficos.
Suprimirok
SuprimirHola Potro, tengo una duda como haria para poner videos que se encuentran ubicados en mi servidor,los videos se encuentran en un ftp, es que en la universidad donde trabajo no dejan abrir el youtube y otras paginas de video. gracias por tu respuesta
ResponderSuprimirHola Unknown, puedes usar un reproductor como JW FLV Player:
Suprimirhttp://vagabundia.blogspot.com/2008/12/jw-flv-player-personalizacin-y-skins.html
hola potro, esta bueno el truco. habria alguna forma para que en vez de hacer click en la imagen, se pudiera colocar un video que comience automatico al ingresar a la pagina? como de bienvenida?
ResponderSuprimirsaludos maestro
potro olvide agregar algo a mi pregunta.
ResponderSuprimirla repito desde el comienzo.
necesito saber si habra alguna variante para este truco, que en vez de apretar en la imagen, el video aparezca automaticamente al entrar a la pagina? como de bienvenida?
lo que olvide mencionar es que ya tengo insertado en la plantilla el codigo para abrir popup con una imagen que enseñaste en esta entrada http://ciudadblogger.com/2009/05/crear-ventanas-popup.html
entonces no se si eso influira en algo.. espero que no o que se pueda arreglar, me gustaria usar ambas tecnicas para mi pagina. te la enseño www.viajeconciertos.com
ojala me puedas ayudar
saludos desde chile
Hola Viaje Conciertos, con Shadowbox podrías hacer que se abra una ventana modal al cargar el blog, además, el resultado es más elegante:
Suprimirhttp://ciudadblogger.com/2011/05/abrir-ventana-al-cargar-el-blog-con.html
MUCHAS GRACIAS!!! quedo mejor de lo que esperaba y no fue nada dificil. tus tutoriales son muy claros y especificos.
Suprimirsolo me queda decir:
GRACIAS!!!