Abrir un video de Youtube en una nueva ventana con Shadowbox
Shadowbox es un clon de Lightbox, pero a diferencia de éste no sólo sirve para visualizar imágenes en ventanas modales, sino también páginas web, archivos en flash, galerías, mapas, y videos en varios formatos de distintos servicios.
En este artículo vamos a ver como abrir un video de Youtube en una nueva ventana modal con Shadowbox.
Implementarlo es bastante sencillo, lo primero que tendremos que hacer es ir a la página oficial y descargar el script.
Una vez tengamos el script subido a nuestro servidor, deberemos crear un archivo html para mostrar los resultados.
En nuestra cabecera o <head> deberemos incluir los estilos y scripts necesarios:
<link rel="stylesheet" type="text/css" href="shadowbox.css"> <script type="text/javascript" src="shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init(); </script>
Y luego dentro de nuestro <body> añadiremos el link con la image a ampliar añadiendo en la etiqueta «href» del link la imagen original con unas dimensiones grandes y la imagen reducida dentro del link.
<a rel="shadowbox;width=405;height=340;" title="Shakira" href="http://www.youtube.com/v/h5jduAtpClk&rel=0&autoplay=1">Ver video</a>
En el siguiente link nos debemos fijar principalmente en la llamada al atributo rel=”shadowbox” con un ancho y alto de la ventana. En la etiqueta «href» del link añadimos el link al video de Youtube con autoplay=1 para que al abrirse la ventana se reproduzca directamente.
Puedes ver más documentación y descargar el script de la página oficial de Shadowbox.
Autor
¿Buscas trabajo de programador?
8 respuestas a “Abrir un video de Youtube en una nueva ventana con Shadowbox”
Deja una respuesta
28 artículos que te podrían interesar
Donde estas los link para descargar. Dice ir a la pagina oficial pero cual carajos es la pagina oficial.
Diría que la página oficial está aquí -> https://www.shadowbox-js.com/
hola, como hago para poner el video de la ventana modal en pantalla completa, gracias,
Hola
No estoy seguro si existe la posibilidad con este plugin. Deberás consultarlo en la página del desarrollador pero por poca fortuna ya no está disponible.
Saludos
Buenas
el aporte es magnífico, pero me gustaría que nos explicases cómo hacer para que el video se pueda ver en teléfonos móviles.
Gracias.
Buenas tardes
muchísimas gracias por la aportación, me ha sido muy útil.
Me gustaría que me indicaras por favor cómo hacer para que el video se pueda reproducir en dispositivos móviles. Lo he probado en mi móvil y no lo reproduce.
Saludos! Cómo hago si quiero que en la miniatura solo se vea un video pero cuando se despliegue la ventana modal aparezcan mas videos, como un galeria?
De antemano Gracias!
No existe la pagina 🙁
Buena información, besos…