Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UI Design
Webdesign

Como Crear un Video Flotante "Pegajoso" en Desplazamiento de Página

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

Si te has encontrado navegando sitios web de medios recientemente---servicios de streaming de video, sitios web de noticias, Facebook y así por el estilo---podrías haber notado una tendencia en relación a sus reproductores de video. Si desplazamos hacia abajo una página en donde hay un video presente, este flotará y encogerá el reproductor, pegándolo al lado del viewport en lugar de perderlo de vista.

Esto permite a los usuarios mantener un ojo en el video, mientras ven el otro contenido al mismo tiempo. En este tutorial, te voy a mostrar como recrear la misma experiencia--así que sin más preámbulos, ¡comencemos!

Ejemplos

Solo para que estemos en la misma página, aquí hay un par de ejemplos:

Entertainment Weekly
Entertainment Weekly envía sus videos a la parte inferior izquierda del viewport
CNN
Los videos de CNN flotan arriba a la derecha

Agregando un Video YouTube

Para comenzar, construyamos el marcado de la página junto con un video YouTube. De manera crucial, embebemos el video con el parámetro enablejsapi=1 agregado; este parámetro nos permitirá interactuar con el video a través de la API YouTube Iframe.

Al fondo de la página, como puedes ver, tambén hemos agregado tres archivos JavaScript; a saber jQuery, el script que nos proporciona la API YouTube Iframe, y el main.js en donde vamos a escribir nuestro JavaScirpt personalizado.

Estilizando

Puedes estilizar la página en cualquier forma que quieras, pero los estilos que nos ocupan específicamente son los que están atados al video YouTube. Primero, agregamos los estilos para hacer responsivo el video YouTube. Estas reglas también habilitarán al contenedor, .content-media--video, para retener su relación de aspecto cuando el video YouTube es reposicionado.

Estilos de Reproductor Flotante

Nuestras siguientes reglas CSS definen como debería flotar el video YouTube. Estamos usando un selector .is-sticky-, que agregaremos al reproductor de manera dinámica con JavaScript, para flotar el video en la página. Esto también reducirá la escala del video, lo posicionará a la izquierda, y lo ajustará para un par de tamaños de viewport.

Nota: deberías ajustar estas propiedades (el tamaño y la posición) de acuerdo a tu audiencia y la naturaleza de tu sitio web. Si, por ejemplo, tu contenido de sitio web es escrito de derecha a izquierda , podría afectar en dónde piensas que es el mejor lugar para tu reproductor de video.

Ahora cuando cargamos esta página podemos ver que el video YouTube se muestra junto con nuestro contenido arbitrario.

Escribiendo JavaScript

Hemos llegado a la parte emocionante de este tutorial; ¡el JavaScript! El contenido de nuestro archivo main.js en este punto es como sigue:

El pedazo de código de arriba es igual al $(document).ready(), que nos permite ejecutar JavaScript una vez que los elementos en la página han sido analizados y están disponibles.

Después, definimos un número de variables. He agregado comentarios en línea al lado de cada variable, para explicar que está pasando.

API YouTube Iframe

Como se mencionó anteriormente, agregamos el archivo JavaScript que proporciona acceso a la API YouTube Iframe. Esta API, una vez cargada, disparará una función llamada onYouTubeIframeAPIReady. Esta función está disponible a nivel global. Y ya que nuestro script está anidado bajo jQuery( function( $ ) { });, tenemos que alcanzar a esta función en el objeto window, como sigue:

Como puedes ver dentro de la función, hemos seleccionado el tributo ID del iframe así como pasado una función llamada onPlayerStateChange. Esta función será disparada cuando el reproductor de video YouTube sea reproducido, pausado o finalizado.

El onPlayerStateChange pasa un objeto Event que nos proporciona piezas de información usables. En este caso, por ejemplo, usaremos el objeto Event .data para obtener el estado del video.

El estado del video, como puedes ver abajo, es representado con un número; 1 es cuando el video se está reproduciendo, 2 es cuando el video es pausado y 3 es cuando el video termina. Agregaremos y quitaremos un nombre de clase de manera acorde cuando el estado cambia.

Flotando y Pegando el Video

Lo que sigue es el código para flotar y pegar nuestro reproductor de video. Vale la pena notar que deberíamos solo flotar el video cuando el video se está reproduciendo. Así pues, primero revisamos el iframe para ver si tiene la clase is-playing antes de agregar la clase is-sticky.

¡Prueba lo que has hecho y deberías ver las cosas funcionando!

Floating video demo
Demo final

Conclusión

¡Terminamos! Este tutorial apuntó a que comenzaras, dándote los fundamentos de cómo flotar un video de manera similar a sitios web de medios que podrías haber visto. Usamos jQuery para hacer el código más simple, corto y fácil de entender para lectores en general.

En un proyecto real, sin embargo, probablemente tengas que modificar detalles aquí y allá dependiendo de la complejidad del proyecto. Por ejemplo, podrías querer ejecutar la función scrolling en una función Throttling para reducir llamadas de función. Podrías también necesitar ajustar la posición y tamaño del video siguiendo el diseño del sitio en un dispositivo móvil, y así sucesivamente.

Sin embargo, revisa el demo, ¡reproduce el video y desplaza!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.