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:
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.
1 |
<div class="site-content"> |
2 |
<div class="container"> |
3 |
<header class="content-header"> |
4 |
<h1>Lorem ipsum dolor sit amet.</h1> |
5 |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, minima!</p> |
6 |
|
7 |
<!-- The YouTube video -->
|
8 |
<figure class="content-media content-media--video" id="featured-media"> |
9 |
<iframe class="content-media__object" id="featured-video" src="https://www.youtube.com/embed/SF4aHwxHtZ0?enablejsapi=1&rel=0&showinfo=0&controls=0" frameborder="0"></iframe> |
10 |
</figure>
|
11 |
|
12 |
</header>
|
13 |
<!-- Content Body -->
|
14 |
<div class="content-body"> |
15 |
</div>
|
16 |
</div>
|
17 |
</div>
|
18 |
|
19 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> |
20 |
<script src="https://www.youtube.com/iframe_api"></script> |
21 |
<script src="scripts/main.js"></script> |
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.
1 |
.content-media--video {
|
2 |
background-color: #ddd; |
3 |
display: block; |
4 |
position: relative; |
5 |
padding: 0 0 56.25% 0; |
6 |
} |
7 |
.content-media--video iframe {
|
8 |
position: absolute; |
9 |
bottom: 0; |
10 |
left: 0; |
11 |
width: 100%; |
12 |
height: 100%; |
13 |
} |
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.
1 |
#featured-video {
|
2 |
transition: width .2s ease-in-out, height .2s ease-in-out, transform .38s ease-in-out; |
3 |
} |
4 |
/** Use .sticky */ |
5 |
#featured-video.is-sticky {
|
6 |
position: fixed; |
7 |
top: 15px; |
8 |
left: auto; |
9 |
max-width: 280px; |
10 |
max-height: 158px; |
11 |
width: 280px; |
12 |
height: 158px; |
13 |
} |
14 |
@media screen and (min-width: 1120px) {
|
15 |
#featured-video.is-sticky {
|
16 |
transform: translateX(-80%); |
17 |
} |
18 |
} |
19 |
@media screen and (min-width: 1300px) {
|
20 |
#featured-video.is-sticky {
|
21 |
transform: translateX(-115%); |
22 |
} |
23 |
} |
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:
1 |
jQuery( function( $ ) {
|
2 |
// Write Code here. |
3 |
} ); |
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.
1 |
var $window = $( window ); // 1. Window Object. |
2 |
var $featuredMedia = $( "#featured-media" ); // 1. The Video Container. |
3 |
var $featuredVideo = $( "#featured-video" ); // 2. The Youtube Video. |
4 |
|
5 |
var player; // 3. Youtube player object. |
6 |
var top = $featuredMedia.offset().top; // 4. The video position from the top of the document; |
7 |
var offset = Math.floor( top + ( $featuredMedia.outerHeight() / 2 ) ); //5. offset. |
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:
1 |
window.onYouTubeIframeAPIReady = function() {
|
2 |
player = new YT.Player( "featured-video", {
|
3 |
events: {
|
4 |
"onStateChange": onPlayerStateChange |
5 |
} |
6 |
} ); |
7 |
}; |
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.
1 |
/** |
2 |
* Run when the Youtube video state (play, pause, etc.) is changed. |
3 |
* |
4 |
* @param {Object} event The Youtube Object Event.
|
5 |
* @return {Void}
|
6 |
*/ |
7 |
function onPlayerStateChange( event ) {
|
8 |
|
9 |
var isPlay = 1 === event.data; |
10 |
var isPause = 2 === event.data; |
11 |
var isEnd = 0 === event.data; |
12 |
|
13 |
if ( isPlay ) {
|
14 |
$featuredVideo.removeClass( "is-paused" ); |
15 |
$featuredVideo.toggleClass( "is-playing" ); |
16 |
} |
17 |
|
18 |
if ( isPause ) {
|
19 |
$featuredVideo.removeClass( "is-playing" ); |
20 |
$featuredVideo.toggleClass( "is-paused" ); |
21 |
} |
22 |
|
23 |
if ( isEnd ) {
|
24 |
$featuredVideo.removeClass( "is-playing", "is-paused" ); |
25 |
} |
26 |
} |
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.
1 |
$window |
2 |
.on( "resize", function() {
|
3 |
top = $featuredMedia.offset().top; |
4 |
offset = Math.floor( top + ( $featuredMedia.outerHeight() / 2 ) ); |
5 |
} ) |
6 |
|
7 |
.on( "scroll", function() {
|
8 |
$featuredVideo.toggleClass( "is-sticky", |
9 |
$window.scrollTop() > offset && $featuredVideo.hasClass( "is-playing" ) |
10 |
); |
11 |
} ); |
¡Prueba lo que has hecho y deberías ver las cosas funcionando!
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!
By
