Lightbox

Este script se encarga de abrir una ventana modal para alojar el video y verlo en tamaño grande. Es lo que se conoce como una lightbox.

Es una ventana modal, es decir, que mientras esté abierta el resto de la página debe aparecer inactivo. Para lograr esto hago dos cosas:

Uso un bloque que abarca toda la pantalla y oculta por tanto los enlaces visibles
Bloqueo el scroll para evitar que se pueda mover la página y desplazar la ventana

Este plugin es de muy utilizado para albergar imágenes en grande, carruseles, videos... Encontrars cientos de variantes, cada una con más o menos opciones y posibilidades. La mayoría dependientes de jQuery.

El que uso aquí es de lo más simple, muy adaptado a la página de ejemplo. Por supuesto sin dependencias externas y procurando la máxima simplicidad.

Lightbox

En el código HTML se coloca un bloque div inicialmente oculto (display:hidden). No se verá ni ocupará espacio alguno.

Dentro de este bloque se coloca otro para el botón que se encargará de cerrarlo. El código lo puedes ver en la página de muestra que hemos creado:

</div>

Y el botón encargado de abrirla se asocia al evento de apertura mediante HTML. Los argumentos de este controaldor de eventos son el nombre de la vetana modal y el del bloque conteniendo el video.

<div class="boton bg-azul" onclick="ventModal('vntmodal','demovid')" >Pantalla completa</div>

Esta ventana necesita un poco de estilo CSS que podría ponerse con un atributo style, pero para lo que prefiero usar CSS:

#vntmodal {

position: fixed;

z-index: 200;

margin: 0;

padding: 0;

width: 100%;

height: 100%;

align-items: center;

justify-content: center;

background-color: rgba(0,0,0,0.72);

transition: transform 1000ms, visibility 1000ms;

display: flex;

transform: scale(0);

transform-origin: 50% 50%;

visibility: hidden;

}

#vntmodal #botcerrar {

position: absolute;

font-size: 2rem;

color: lightgrey;

left: calc(100% - 2.2rem);

top: 1rem;

}

#vntmodal #botcerrar:hover {

cursor: pointer;

}

Lo básico aquí es que se trata de una position:fixed, un z-index de valor alto para que lo cubra todo. Las propiedades transition y transform scale() las he puesto para dar un efecto de apertura de la ventana animado, la ventana crece desde un punto de la pantalla, el definido por transfrom-origin.

Para que los efectos de animación sean visibles voy a ocultar y visibilizar la ventana mediante la propiedad visibility, con un scale(0) para que no ocupe espacio. Esto se debe a que display no es animable, no acepta transition y quiero un efecto para abrir esta ventana.

Javascript para la lightbox.

El controlador de esta ventana basicamente trata de mostrar y ocultar la ventana. Este controlador está asociado al botón mostrado en el apartado demo de la página.

function ventModal(idVent, idCont) {

let trOrg, X, Y;

let cont = document.getElementById(idCont);

let vnt = document.getElementById(idVent);

vnt.appendChild(cont);

window.addEventListener("scroll", noScroll , true);

//Punto desde el que se despliega la ventana

trOrg = cont.getBoundingClientRect();

X = Math.round(trOrg.left + trOrg.width / 2);

Y = Math.round(trOrg.top + trOrg.height / 2);

window.noY = window.pageYOffset;

cont.contenedor = cont.parentElement;

vnt.style.top = 0 + "px";

vnt.style.transformOrigin = X + "px " + Y + "px";

//visibilizar la ventana

vnt.style.visibility = "visible";

vnt.style.transform = "scale(1)";

}

Lo que hace el script es sencillo:

obtiene el contenido (cnt) a partir del bloque dado por idCont.
identifica la ventana modal, con el argumento idVent (vnt)
Toma el contendio y lo agrega a la ventana
Pone la ventana en modo visible (style.visibility)

Esto es lo básico. El resto es para colocar el origen desde el que se abre la ventana, y para bloquear el scroll de la ventana.

Insisto en que en este caso he querido poner un efecto de apertura y cierre. Si no el script sería simplemente poner la propiedad display en block.

También se traslada el video desde la situación actual a la ventana, no una coopia, sino el objeto video completo. Por eso se crea la propiedad cont.padre, para almacenar el contenedor normal del video dentro de la página.

El bloqueo del scroll es básico para que la ventana sea totalmente modal, evita que se puede hacer scroll en la pagina. Esto se consigue forzando a que la ventana se mantenga en el mismo lugar:

function noScroll()

{

window.scrollTo(0,window.noY);

}

Al abrir la ventana se almacena en window.noY la coordenada de la ventana del navegador en ese momento y aquí se fuerza a que esa vetana siga en esa posición vertical con un window.scrollTo(osX, posY)

Para cerrar la ventana se usa el botón con id="botcerrar" con el evento click asociado a la función cerrarModal(). Mediante esta función aplicamos la propiedad scale(0), o sea disminuimos su tamaño a cero, y volvemoas a colocar visibillity en hidden para oculatarla a la vista.

Además reponemos el scroll de la ventana. Es interesante como se elimina el controlador de evento removeEventListener(), algo que podemos hacer gracias a que se le asoción mediante addEventListener.

function cerrarModal(vnt) {

let vnt = document.getElementById(vnt);

let padre = vnt.children[1].contenedor;

padre.appendChild(vnt.children[1]);

vnt.style.transform = "scale(0)";

vnt.style.visibility = "hidden";

window.removeEventListener("scroll",noScroll, true)

}

Como ves básicamente se trata de devolver el video a su contendor original (.contenedor), devolver la ventana modal al estado oculto y liberar el scroll de ventana.

Este plugin es un poco más complejo por el efecto de apertura y cierre de la ventana y por que no se usa una copia del objeto video, sino que este se mueve de un elemento del DOM a otro. No todo va a ser fácil ¿no?, te recomiendo que te trabajes estos sripts para por ejemplo cambiar el efecto de despliegue de la ventana, o para quitarle efectos o para optimizarlo aún más reduciendo líneas de código... como quieras. Si te trabajas los scripts aprenderás bastante.