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

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 põe vídeos no canto direito inferior da área de visualização

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.

<div class="site-content">
<div class="container">
 <header class="content-header">
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, minima!</p>

   <!-- The YouTube video -->
    <figure class="content-media content-media--video" id="featured-media">
      <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>
    </figure>

 </header>
 <!-- Content Body -->
 <div class="content-body">
 </div>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="scripts/main.js"></script>

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.

.content-media--video {
   background-color: #ddd;
   display: block;
   position: relative;
   padding: 0 0 56.25% 0;
}
.content-media--video iframe {
  position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

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.

#featured-video {
  transition: width .2s ease-in-out, height .2s ease-in-out, transform .38s ease-in-out;
}
/** Use .sticky */
#featured-video.is-sticky {
  position: fixed;
  top: 15px;
  left: auto;
  max-width: 280px;
  max-height: 158px;
  width: 280px;
  height: 158px;
}
@media screen and (min-width: 1120px) {
   #featured-video.is-sticky {
      transform: translateX(-80%);
   }
}
@media screen and (min-width: 1300px) {
   #featured-video.is-sticky {
      transform: translateX(-115%);
   }
}

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:

1	jQuery( function( $ ) {
2	// Write Code here.
3	} );

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.

var $window = $( window ); // 1. Window Object.
var $featuredMedia = $( "#featured-media" ); // 1. The Video Container.
var $featuredVideo = $( "#featured-video" ); // 2. The Youtube Video.

var player; // 3. Youtube player object.
var top = $featuredMedia.offset().top; // 4. The video position from the top of the document;
var offset = Math.floor( top + ( $featuredMedia.outerHeight() / 2 ) ); //5. offset.

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:

window.onYouTubeIframeAPIReady = function() {
player = new YT.Player( "featured-video", {
   events: {
     "onStateChange": onPlayerStateChange
   }
} );
};

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.

/**
 * Run when the Youtube video state (play, pause, etc.) is changed.
 *
 * @param {Object} event The Youtube Object Event.
 * @return {Void}
 */
function onPlayerStateChange( event ) {

   var isPlay  = 1 === event.data;
   var isPause = 2 === event.data;
   var isEnd   = 0 === event.data;

   if ( isPlay ) {
      $featuredVideo.removeClass( "is-paused" );
      $featuredVideo.toggleClass( "is-playing" );
   }

   if ( isPause ) {
      $featuredVideo.removeClass( "is-playing" );
      $featuredVideo.toggleClass( "is-paused" );
   }

   if ( isEnd ) {
      $featuredVideo.removeClass( "is-playing", "is-paused" );
   }
}

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:

$window
.on( "resize", function() {
   top = $featuredMedia.offset().top;
   offset = Math.floor( top + ( $featuredMedia.outerHeight() / 2 ) );
} )

.on( "scroll", function() {
   $featuredVideo.toggleClass( "is-sticky",
     $window.scrollTop() > offset && $featuredVideo.hasClass( "is-playing" )
   );
} );

Testemos tudo que fizemos e vejamos as coisas funcionando!

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!