Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. UI Design
Webdesign

Criando um Vídeo "Fixo" e Flutuante ao Rolar a Página

by
Difficulty:IntermediateLength:ShortLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Se já navegou em sites de mídia recentemente–sites de transmissão de vídeos, de notícias, Facebook, etc–talvez tenha notado uma tendência em relação aos tocadores de vídeo. Se rolarmos a página de um vídeo, ele flutuará e diminuirá, fixando ao lado da área de visualização ao invés de perdê-lo de vista.

Isso permite os usuários manterem um olho no vídeo ao olharem outros conteúdos ao mesmo tempo. Nesse tutorial, mostraremos como recriar essa experiência–sem mais delongas, comecemos!

Exemplos

Para que saibamos exatamente do que se trata, eis alguns exemplos web a fora:

Entertainment Weekly
Entertainment Weekly põe vídeos no canto direito inferior da área de visualização
CNN
Vídeos da CNN flutuam à direita

Adicionando Vídeo do YouTube

Para começar, criemos a marcação da página com um vídeo do YouTube. Especificamente, embutimos o vídeo com o parâmetro enablejsapi=1. Ele nos permite interagir com o vídeo pela API Iframe do YouTube.

No final da página, como vemos, adicionamos três arquivos JavaScript: jQuery; o que provê a API Iframe do YouTube; e o main.js, onde escreveremos nosso JavaScript customizado.

Estilizando

Podemos estilizar a página como quisermos, mas os estilos que trataremos aqui são responsáveis por lidar com o vídeo do YouTube. Primeiro, adicionaremos estilos para tornar o vídeo responsivo. Essas regras também habilitarão o container, .content-media--video, a manter sua proporção quando o vídeo for reposicionado.

Estilos do Tocador de Vídeo Flutuante

Nossa próxima regra CSS define como o vídeo deve flutuar. Usaremos o seletor .is-sticky, que adicionaremos ao tocador dinamicamente com JavaScript, para flutuar o vídeo na página. Isso também irá diminuí-lo, posicioná-lo à esquerda e ajustá-lo a algumas áreas de visualização.

Nota: devemos ajustar essas propriedades (tamanho e posição) de acordo com nosso público e natureza do site. Se, por exemplo, o conteúdo é da direita-para-esquerda, poderá afetar o melhor posicionamento do player para o site.

Agora, ao carregar a página, vemos que o vídeo é mostrado junto de conteúdo aleatório.

Escrevendo JavaScript

Chegamos à parte excitante do tutorial, o JavaScript! Nosso main.js está assim:

O trecho acima equivale a $(document).ready(), que nos permite executar JavaScript quando todos os elementos da página tiverem sido analisados e disponibilizados.

Depois, definimos algumas variáveis. Adicionamos comentários em linha ao lado de cada uma, explicando-as.

API Iframe do YouTube

Como dito antes, adicionamos o arquivo JavaScript que provê acesso à API Iframe do YouTube. Essa API, após carregada, ativará a função onYouTubeIframeReady. Ela está disponível em nível global. E como nosso código está aninhado em jQuery(function($) {}); podemos usar essa função a partir do objeto window, assim:

Como vemo, selecionamos o atributo ID do iframe bem como passamos a função onPlayerStateChange. Ela será ativada quando o tocador do YouTube for iniciado, pausado ou finalizado.

onPlayerStateChange passa um objeto Event que nos provê dados úteis. Nesse caso, usaremos o objeto .data de Event para obter o estado do vídeo.

O estado do vídeo, como vemos abaixo, é representado por um número: 1 quando está tocando; 2 quando está pausado; e 3 quando o vídeo termina. Adicionaremos e removeremos um nome de classe de acordo com a mudança de estado.

Tornando o Vídeo Flutuante e Fixo

Abaixo temos o código para flutuar e fixar o tocador. Vale notar que apenas devemos fixar o vídeo quando ele está tocando. Assim, primeiro checamos o iframe para ver se possui a classe is-playing antes de adicionar a is-sticky:

Testemos tudo que fizemos e vejamos as coisas funcionando!

Floating video demo
Demo final

Conclusão

Terminamos! Esse tutorial focou no básico, mostrando os fundamentos para criar um vídeo flutuante, como em sites de mídia que vemos. Usamos jQuery para simplificar, encurtar e facilitar o entendimento do código no geral.

Em um projeto real, contudo, provavelmente, ajustaremos alguns detalhes aqui e acolá, dependendo da complexidade. Por exemplo, talvez queiramos executar a função de rolagem em uma função de Aceleradora para reduzir invocação de funções. Talvez também queiramos ajustar a posição e tamanho do vídeo para seguir o layout do site em dispositivos móveis, e por aí vai.

Ainda assim, vejamos a demo, toquemos o vídeo e rolemos a página!

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.