A quienes le parezca interesante la idea de tener videos de youtube insertados (embedded) en su página web y poder reproducir otro(s) sin tener que recargar o abrir una nueva pestaña o página, acá les dejo un tutorial para hacerlo, es muy sencillo y no hay que ser un experto en diseño web, sólo hay que tener un poco de conocimiento de HTML y un poco más, aún, de javascript.
Ante todo debemos tener una lista de enlaces de videos con la cantidad que queramos. Pueden ser 2, 3, 4, 10, 20, etc., enlaces. Consideremos la siguiente lista de como ejemplo:
Ante todo debemos tener una lista de enlaces de videos con la cantidad que queramos. Pueden ser 2, 3, 4, 10, 20, etc., enlaces. Consideremos la siguiente lista de como ejemplo:
http://www.youtube.com/watch?v=XzbPezkHIb8
http://www.youtube.com/watch?v=1ywiLKxf56k
http://www.youtube.com/watch?v=MZVQjo1aoJc
http://www.youtube.com/watch?v=z3Kkro0ztJg
http://www.youtube.com/watch?v=lebP_W34N9w
Bien, acá tenemos 5 videos. En este ejemplo colocaremos el primero como video predeterminado al cargar la página. Recordamos que el ID del video es XzbPezkHIb8 (esto será muy importante ya que al trabajar solamente con los IDs nos ahorraremos espacio en nuesteo código). Los IDs de los otros cuatro videos son 1ywiLKxf56k, MZVQjo1aoJc, z3Kkro0ztJg y lebP_W34N9w, respectivamente.
Ahora consideremos el siguiente código como un estándar (aunque siempre youtube lo cambia) para la inserción de videos:
<iframe title="Título" width="Ancho" height="Alto" src="http://www.youtube.com/embed/ID_del_video" frameborder="0" allowfullscreen></iframe>
Donde los elementos en verde son parámetros personalizables y el elemento en rojo es el ID del video.
Como en nuestro ejemplo el video predeterminado al cargar será el que tiene ID XzbPezkHIb8, y considerando un ancho de 480 pixels y un alto de 390pixels, el código de inserción será:
<div id="rep">
<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/XzbPezkHIb8" frameborder="0" allowfullscreen></iframe>
</div>
<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/XzbPezkHIb8" frameborder="0" allowfullscreen></iframe>
</div>
¿Por qué insertamos nuestro código dentro de las etiquetas <div id="rep"> y </div>? Porque necesitaremos un elemento html con un id determinado para que con nuestra función javascript podamos cambiar lo que hay dentro de dicho elemento.
Nota: Este código lo colocaremos en cualquier parte de nuestra página web, la que deseemos.
Ahora insertaremos esta función de javascript mediante la cual cambiaremos de video con la ayuda de unos enlaces de referencia que definiremos más adelante. Nota: recomiendo insertar el siguiente código entre las etiquetas <head> y </head> de nuestro html.
<script type="text/javascript">
function Reproducir(id)
{
var in1="<iframe title=\"YouTube video player\" width=\"480\" height=\"390\" src=\"http://www.youtube.com/embed/";
var in2="\" frameborder=\"0\" allowfullscreen></iframe>";
var ids = ["XzbPezkHIb8", "1ywiLKxf56k", "MZVQjo1aoJc", "z3Kkro0ztJg", "lebP_W34N9w"];
for (i=0;i<ids.length;i++)
{
if(id===i)
{
document.getElementById("rep").innerHTML=in1 + ids[i] + in2;
}
}
}
</script>
function Reproducir(id)
{
var in1="<iframe title=\"YouTube video player\" width=\"480\" height=\"390\" src=\"http://www.youtube.com/embed/";
var in2="\" frameborder=\"0\" allowfullscreen></iframe>";
var ids = ["XzbPezkHIb8", "1ywiLKxf56k", "MZVQjo1aoJc", "z3Kkro0ztJg", "lebP_W34N9w"];
for (i=0;i<ids.length;i++)
{
if(id===i)
{
document.getElementById("rep").innerHTML=in1 + ids[i] + in2;
}
}
}
</script>
Una vez que agreguemos nuestro código javascript, sólo nos faltará crear enlaces de referencia, los cuales contendrán cada uno de los videos que podremos reproducir en nuestra página al hacer clic sobre ellos, en este caso son, como ya habíamos dicho, 5 videos, por lo tanto 5 enlaces. Utilizaremos el siguiente código HTML para ello:
<a href="javascript:Reproducir(0)">Anhelo</a><br>
<a href="javascript:Reproducir(1)">Hoy Aprendí</a><br>
<a href="javascript:Reproducir(2)">Dame Una Oportunidad</a><br>
<a href="javascript:Reproducir(3)">Amiga</a><br>
<a href="javascript:Reproducir(4)">No Puedo Ser Tu Amigo</a>
<a href="javascript:Reproducir(1)">Hoy Aprendí</a><br>
<a href="javascript:Reproducir(2)">Dame Una Oportunidad</a><br>
<a href="javascript:Reproducir(3)">Amiga</a><br>
<a href="javascript:Reproducir(4)">No Puedo Ser Tu Amigo</a>
Es importante que sigamos la secuencia 0, 1, 2, 3, 4, 5, etc., comenzando siempre desde 0. Este código lo podemos colocar debajo del que contiene el video insertado para que finalmente nuestro resultado sea algo como sigue:
Hoy Aprendí
Dame una oportunidad
Amiga
No Puedo Ser Tu Amigo
hola amigo, excelente truco pero no lo puedo poner en blogger, porque no me deja pegar el script dentro del head, me puedes ayuda??? muchas gracias :)
ResponderEliminarEs recomendable (pero no necesario) que coloques el script dentro de las etiquetas <head></head>.
ResponderEliminarColócalo en el body.
Nota: por alguna razón cuando edites/modifiques la entrada, el script parece desconfigurarse y el truco no funciona (me pasó a mí hace meses cuando creé esta entrada). Así que cuando tengas el script y la lista de enlaces listo guarda todo en tu disco duro, de esta forma si al modificar la entrada te deja de funcionar, sólo tienes que copiar y pegar el respaldo que tienes guardado en tu disco.
Hola Jader, trato de insertar ID diferentes en el código y no me corren los videos en mi página. Si me aparece el reproductor de Youtube y el listado de los videos que quiero publicar.
ResponderEliminarAyudame a ver qué es lo que pasa y muchas gracias
Hola Jader, ya encontré la solución a mi problema. En la línea de código variable
ResponderEliminarvar in1="<iframe title=\"YouTube video player\" width=\"480\" height=\"390\" src=\"http://www.youtube.com/v/";
al final escrbí la "v" en vez de "embed" y funcionó !!! Gracias por el código. :D
Me alegro que te haya funcionado, Natali.
ResponderEliminarHubieses dejado la dirección de tu blog para echarle un vistazo :-)
Que Buen Tutorial Amigo me sirvió mucho Gracias
ResponderEliminarpara los que quieren que se reproduzca automáticamente al dar clic anexan al código lo siguiente : despues del ID ?&autoplay=1
var ids = ["XzbPezkHIb8?&autoplay=1", "1ywiLKxf56k", "MZVQjo1aoJc", "z3Kkro0ztJg", "lebP_W34N9w"];
Exelente tutorial, solamente me gustaria saber como reproducr con un click toda la lista de video
ResponderEliminarentrenemiento, para ello es necesario que CREES TÚ MISMO una LISTA DE REPRODUCCIÓN en YOUTUBE y utilices el siguiente código HTML:
ResponderEliminar<iframe src="http://www.youtube.com/embed/p/ID"
width="ancho" height="alto" frameborder="0"></iframe>
donde ID es el id de la lista de reproducción de youtube y los parámetros "width" y "height" representan el ancho y el alto del marco en el que se visualizarán los videos y son personalizables.
perfecto amigo mil gracias funsiono muy biem el codigo exelente
ResponderEliminaruna pregunta se podria poner que los videos empiecen aleatoriamente
ResponderEliminarDaltontv, eso requeriría del uso de una función de JavaScript llamada "random" y cuya implementación es Math.random().
ResponderEliminarAyúdate con google para estructurar dicha función, tomando como argumentos los IDs de video para procesarlos con ella.
Hola,
ResponderEliminarSi quisiera que la lista de mis 5 videos corra de manera automatica con solo dar un click, qe deberia hacer? Ojo, sin usar http://www.youtube.com/embed/p/ID.
José, cre que deberías crear una lista en youtube y utilizar alguna opción de reproducción automática en tu código de inserción (embedded)
ResponderEliminarGracias jader por el codigo, me sirvio mucho. Yo le anexe &rel=0 para que no me cargue los videos relacionados al terminar la reproduccion.
ResponderEliminar["XZIef4edLqU?feature=player_detailpage&rel=0",
"IpfnPltXxvY?feature=player_detailpage&rel=0",
"KBHd-w_XmnI?feature=player_detailpage&rel=0",
"xyLeXJ9gxLw?feature=player_detailpage&rel=0",
"B3W6RsphNkM?feature=player_detailpage&rel=0"];
Bien, Martin, gracias por el aporte.
ResponderEliminarMUCHAS GRACIAS BROTHER EXELENTE EL SCRIPT FUNCIONA PERFECTO,AHORA YA TENGO MI PAGINA CON EL DISEÑO PARESIDO A LA PAGINA DE YOU TUBE TODOS LOS VIDEOS SE CARGAN DENTRO DE UN SOLO IFRAME ERES UN CAPO SALUDOS .
ResponderEliminarHola. ¿Existe alguna forma de dejar reproducción automatica (como usando una lista de reproduccion de youtube) pero además que tenga la lista de videos en la parte inferior para poder seleccionar aleatoriamente ?
ResponderEliminarYa logre solucionar esta pregunta, pero ahora me surge otra, ¿se puede lograr una reproducción automática de los videos al seleccionar su titulo en la parte inferior?, es decir, con un solo clik.
EliminarMuy buen aporte!! Excelente...
ResponderEliminarBuen aporte, los videos corren pero no puedo manipularlos
ResponderEliminarAlguien me puede ayudar, no me funciona pantalla completa ni quitar la publicidad, ni pausa ni detener, alguna solución en fin nada dentro de la pantallita d e youtube ayuda por favor
Excelente amigo muchas gracias me salvaste la vida y me funcionó al 100%, lo andaba buscando por todas partes.
ResponderEliminarGracias por su ayuda
ResponderEliminarcomo puego grabarlo en mi pc el video del iframe?
ResponderEliminarNo puedes, youtube tienen años invirtiendo esfuerzo y dinero para que los usuarios no descarguen los videos hospedados en youtube.com y los controles que aplican son cada vez más fuertes. Si deseas descargar videos de youtube te sugiero que busques en google, hay varias herramientas que te permitirán hacerlo.
EliminarPues a mi,no me funciona
ResponderEliminarEs justo lo que estaba buscando para reproducir en una sola pagina una sere completa sin tener que redireccionar a otro blog.
ResponderEliminarsolo una pregunta: ¿crees tu que se pudiera insertar un pop up en cada liga?
Claro, pero creo de nada te serviría el código especificado en este tutorial ya que los popups manejan su propio mecanismo JavaScript.
ResponderEliminarhola puse el video pero en el Chrome no lo puedo reproducir, es como si fuera una imágen, como le hago??
ResponderEliminarSi suministras un link a la página en la cual quieres insertar los videos tal vez pueda ayudarte.
EliminarGracias por la ayuda!!!
ResponderEliminarInteresantisimo. Agradecido
ResponderEliminarhola,para poner una lista de 10 videos que otros codigos utilizaria??
ResponderEliminarpodrias pasarmelos??
oye amigo una pregunta ¿Puedo poner varios videos de diferentes sitios?
ResponderEliminarcomo por ejemplo: un video de youtube, y uno de otro reproductor
y si se puede como lo ago
Gracias por compartir tu conocimiento, funciona muy bien. Lo que estaría peola peola es que no desaparezcan los links restantes cuando se selecciona alguno de ellos. En fin, hay que seguir probando con eso. Saludos.
ResponderEliminarexelente
ResponderEliminarhola
ResponderEliminarhola
ResponderEliminarhola amigo como hago para ocultar el iframe y detener la reproduccion
ResponderEliminarhola. como hacer que esos videos se reproduzcan automáticamente al cargar la pagina?
ResponderEliminarExcelente código gracias jader
ResponderEliminarhola todo funciona perfecto, ahora tengo una duda, como hacer para que muestre el mismo video en un minuto/segubndo exacto. Es decir si mi video principal es muy largo y quiero que los links sean capitulos e irlos mandando a minuto/segundo exacto del mismo video....gracias!
ResponderEliminarGenial
ResponderEliminarHola a todos, soy Adrik Vadim, vivo en la ciudad de Kurgán, quiero compartir con todos ustedes cómo el Sr. Benjamín me ayudó con un préstamo de 15.000.000.00 rublos para iniciar mi entrega de bebidas alimenticias, después de todo, tengo trabajo en varios hoteles aquí en Kurgán sólo para ganarme la vida, pero desafortunadamente todavía tenía dificultades para pagar el alquiler, pero doy gracias a Dios ahora que soy un trabajador independiente con 5 trabajadores a mi cargo. Si busca libertad financiera, le aconsejo que se ponga en contacto con el Sr. Benjamín con el siguiente correo electrónico y el número de aplicación. 247officedept@gmail.com +1-989-394-3740
ResponderEliminar