Abrir un video de Youtube en una nueva ventana con Fancybox 1.3.4
FancyBox es una herramienta para la visualización de imágenes, contenido HTML y multimedia al estilo “lightbox” flotante sobre la página web.
En este artículo vamos a ver como abrir un video de Youtube en una ventana modal utilizando Fancybox.
Lo primero que tendremos que hacer es ir a la página oficial de Fancyboxpara descargar el script y ver más información.
Una vez tenemos los archivos necesarios en nuestro servidor podemos empezar a añadir a nuestra página HTML el efecto Fancybox.
En nuestra cabecera o <head> deberemos añadir los estilos y scripts necesarios:
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a#open_video").fancybox();
});
</script>
Hará falta la librería jQuery y los scripts y estilos de Fancybox, además de la llamada a la función fancybox() que tras pulsar en un elemento con id=»open_video» se abrirá el video indicado con Youtube.
En nuestro <body> deberemos añadir el link con la imagen reducida que tras pulsarlo abrirá ampliada esta misma imagen.
<a class="iframe" id="open_video" href="http://www.youtube.com/embed/8UVNT4wvIGY">Ver video</a>
Autor
¿Buscas trabajo de programador?
15 respuestas a “Abrir un video de Youtube en una nueva ventana con Fancybox 1.3.4”
Deja una respuesta
27 artículos que te podrían interesar
Esto no va
Amigo, necesito hacer algo similar a lo que haces aqui, pero sin darle click a un enlace, sino que al abrir la página automáticamente aparezca el video como un POP up… he buscado otras opciones pero no lo he conseguido
Hola, aplique fancy box para vimeo de esta forma con un iframe
pero me envia al video en pantalla completa, fuera de mi pagina, sin el boton de cerrar ni la transparencia de fondo, como puedo hacer para que el ligthbox se vea correctamente
ce puede hacer los mismo con vimeo? como seria? saludos gracias, lo hice con youtube y anduvo perfecto!
Hay alguna forma de no hacer click si no que utilizar un mouseover? o algo parecido, es decir al poner el mouse sobre el enlace que aparezca el video??
Hola buenos días,
Con fancybox no lo veo factible aunque quien sabe…
Lo que si se que te puede funcionar es combinar los 2 siguientes posts:
http://www.jose-aguilar.com/blog/popup-me-con-jquery/ y http://www.jose-aguilar.com/blog/mouseenter-mouseleave-animation-con-jquery/
gracias !
http://www.jose-aguilar.com/blog/popup-me-con-jquery/
con ese ejemplo me funciono, solo cambie en el JS .click por .onmouseover y listo 😀
Mi wordpress no me deja instalar como plugin la versión Fancybox 1.3.4. Como podría arreglar este problema.
si, creo que el iframe del video tiene una opcion autoplay o algo asi…
Hola!
Tengo una duda, hay forma de que el video se pueda reproducir sin tener que dar clic sobre un enlace… me podrías decir como hacerlo.
Gracias
si, creo que el iframe del video tiene una opcion autoplay o algo asi…
function onYouTubeIframeAPIReady() {
player = new YT.Player(‘player’, {
height: ‘400’,
width: ‘73%’,
//playerVars: {‘autoplay’:0, ‘controls’: 0,’disablekb’:1,’enablejsapi’:0,’rel’:0,playlist:’VcszJFJZHJI’,loop:’1′ },
playerVars: {‘autoplay’:0, ‘controls’: 0,’disablekb’:1,’enablejsapi’:0,’rel’:0,playlist:’VcszJFJZHJI’,loop:’0′ },
videoId: ‘VcszJFJZHJI’,
events: {
‘onReady’: onPlayerReady,
‘onStateChange’: onPlayerStateChange,
‘onError’: onPlayerError
}
});
}
Hola!
Tengo un problema al abrir el video, lo que pasa es que si lo abre pero ocupa todo el ancho y alto de ventana, ya cambie en el script el width y el height.
No se en que parte tengo que modificar para que aparezco como en tu ejemplo.
Espero me puedas ayudar y gracias por el código.
Prueba buscar en los estilos
Lo pudiste solucionar? Yo hace una hora que estoy y me sigue tirando a youtube, nunca aparece la ventana lightbox.