Abrir un video de Youtube en un nueva ventana con Rlightbox

rlightbox es una interfaz de usuario jQuery mediabox que puede mostrar muchos tipos de contenidos tales como imágenes, vídeos de YouTube y Vimeo. Tiene muchas características únicas, como la vista en panorama y la redimensión en vivo.

En este artículo vamos a explicar como abrir en una ventana modal un video de Youtube utilizando Rlightbox.

Para hacer funcionar este estupendo ampliador de contenidos deberemos incluir en el <head> de nuestra página Web lo estilos y scripts:

<link type="text/css" rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" />
<link type="text/css" rel="stylesheet" href="css/lightbox.min.css" />
<script type="text/javascript" src="lib/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="lib/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="lib/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="lib/jquery.ui.rlightbox.min.js"></script>
<script type="text/javascript">
    jQuery(function($) {
        $( ".lb_youtube" ).rlightbox();
    });
</script>

Después en el <body>, deberemos añadir el link correspondiente al video:

<a class="lb_youtube" title="Animated history of Poland" href="http://www.youtube.com/watch?v=2DrXgj1NwN8">
    <img alt="Animated history of Poland" src="images/01.jpg" width="160" height="120" />
</a>

Ver ejemplo en funcionamiento

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(0 votos, promedio: 0 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

2 respuestas a “Abrir un video de Youtube en un nueva ventana con Rlightbox”

  1. efren dice:

    lo siento estoy comenzando ya pude resolverlo
    😀 estoy al pendiente de tus aportes saludos!!

  2. efren dice:

    buen aporte saludos!!

    una pregunta y los archivos js.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre