Cómo crear un efecto cine con videos de Youtube con jQuery

No encontré una mejor descripción para el tutorial que vamos a ver hoy. Y es que muchos servicios de videos, incluidos Youtube, tienen su función de cine, o la posibilidad de ver videos con las luces apagadas para poder ver mejor el video sin distracciones.

Eso es lo que vamos a ver hoy, como hacer un efecto de cine con videos de Youtube utilizando jQuery para nuestro blog, de tal modo que podamos darle la opción al usuario de que toda la pantalla de oscurezca y sólo nos muestre el video en el centro, sin distracciones.

Demo del tutorial Archivos fuente

Si ven el demo se pueden dar cuenta que el video al tomar la opción de hacerlo más grande la pantalla se oscurece y el video se agranda, y si lo cerramos veremos que el video regresa a su estado actual.

Lo que tenemos que ver antes de empezar es que está ampliado para cualquier número de videos siempre que estén en nuestra capa. Otros detalles que tenemos que saber es que:

• Los botones se agregar por medio de jQuery
• Los videos que no están en el efecto cine se ocultan, ya que la etiqueta object no permite que haya una capa más arriba, lo que haría que siempre se vieja encimado.

Entonces, ya que conocemos esto empecemos el tutorial.

HTML

Lo que necesitamos es una capa donde dentro de ella esté el código de inserción del video de Youtube. Cabe mencionar que Youtube nos ofrece dos formas de insertar el video en nuestro sitio, por medio de iframes, o por medio de la etiqueta object, para este tutorial necesitamos que sea object.

De todas la operación se encargara tanto CSS como jQuery, por lo que realmente el código HTML queda muy sencillo.

CSS

Cuando nuestros usuarios den clic a un botón para ver el video en formato cine lo que hará esto es que le aplicaremos un estilo a dicha capa, le pondremos una posición fija para que nunca se mueva, y el pondremos un ancho y alto de 100%. Básicamente eso es lo más importante que tenemos que saber.

Y otra cosa, fíjense que todo está manejado por clases, para que podamos usar los mismos estilos y nombres de clases para N número de videos, porque poner ID no sólo nos hace ver mal, sino que tendríamos que hacer un código para cada video.

Como les decía, dinámicamente agregaremos un botón que nos permita cambiar de un modo a otro, y este es su estilo, nada del otro mundo, sólo bordes y colores de fondo para que se distinga. Lo que si es que tenemos que saber lo siguiente: tenemos un botón el cuál tendrá dos estilos por cada estado del video, cuando el video esté normal se aplicará el estilo .pantalla a y su derivado :hover. Sin embargo cuando lo agrandemos le aplicaremos a todo un estilo .completa, por lo que el primer estilo seguirá vigente, pero el actual tendrá más prioridad.

jQuery

Ahora si viene lo interesante, y les voy a contar lo que hace el código. Lo primero es agregar un botón a cada video para poder hacer el efecto de cine en cada video de nuestro post o sitio.

Lo segundo es definir un evento para que cuando se de clic sobre el botón que creamos cambie de las dos vistas disponibles: la normal o la de cine. Para eso está un condicional, para checar el estado del video de acuerdo al texto del botón. Si dice cerrar es porque el video está a tamaño completo, si no es porque está normal.

En cualquier caso si está en formato cine mostramos todos los video y le quitamos al actual el estilo .completa. Si está normal ocultamos todos los videos y el actual lo mostramos añadiendo el estilo.completa. Para obtener esa capa usamos el método .closest(‘div’) para obtener la capa padre más cercana al botón, y puesto que sólo hay una capa pues jQuery sabe cuál ocupar.

Si han hecho todo lo del tutorial ya deberían ver su video así:

Demo del tutorial

Archivos fuente