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.
Enlaza este blog
Suscribirse al feed
Suscribirse por e-mail
Agregar en tu iGoogle
Seguir en Twitter
Unirse en Facebook
Enviar un correo
Iconos RSS.PNG)
Música JPZ
50 comentarios:
Interesante truco bro!
Un abrazo!
Ademas se carga mas rápido la página, ya que es mas sencillo cargar un imagen que el reproductor de Youtube!
Tienes 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.
Mi blog tambien esta saturado y eso que no tengo videos. jajaja. A mi también me va a servir.
Gran Potro.
Ya 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.
Como 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,
Gracias 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
=)
Me da gusto que te sea de ayuda.
Saludos!
¡Hola!
Te 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,
No 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
Gracias MAN
Kuoves
armandoequipos.ya.st
Hola kuo,
Me 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
Hola Ing. Jhon Mauricio Ramirez Herrera,
Todos 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
no me salio como en tú ejemplo mostrando solo la imagen PLAY, que hise mal???
atte;
Ronald
www.pasionportemuco.tk
Hola RonnyTemxcano,
Cuando 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
hola, Potro
felicitarte 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,
Debe 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
potro 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.
Saludos!
El comentario anterior ha sido identificado como SPAM y se ha eliminado de la entrada.
Hola, como estan?¿?
Espero 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",
El 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
Entonces sólo cambia esta parte del código por el texto que quieres:
<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?
Claro, 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.
Saludos.
Hola Potro
Con 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:
http://vagabundia.blogspot.com/2009/10/incrustar-multiples-videos-de-youtube.html
Saludos.
Gracias potro
buenísimo, gracias!
Gracias a ti por tu visita :)
espero tu visita en mi sitio aca te dejo el link dejame el visto bueno http://exclusivojuegosparapc.blogspot.com/
Como 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.
Si 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.
no 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
Desde 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.
aaa ok muchas gracias por su tiempo q paginas mas buena la unica que me contestan de verdad felicitasiones ;)
Te agradezco tu comentario :)
Saludos, 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.
Muy buenos dias, Saludos nuevamente amigo, tambien me gustaria saber como coloco un texto en el enlace en vez de la imagen (ver video).
Lamentablemente en Internet Explorer ya no funciona este truco, sólo para los demás navegadores.
Para 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
Hola Angular Estereo 97.2 FM,
En Internet Explorer ya no funciona el código :(
Muy buena Potro.
Una 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.
Saludos.
Publicar un comentario en la entrada
Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja la dirección del mismo.