Portuguese (Português) translation by Erick Patrick (you can also view the original English article)
Hoje, explicaremos como "carregar sob demanda" vários videos embutidos do YouTube. Fazer isso aprimorará a performance do carregamento inicial da sua página, além de ajudar o usuário.
Carregamento sob Demanda
Embutir vídeo do YouTube tornou-se um processo normal para qualquer um envolvido com a web: copiar, colar e pronto. Contudo, trazer um recurso externo como um vídeo do YouTube pode diminuir a performance de carregamento da página, especialmente se há mais de um vídeo embutido nela.
Ao embutir vídeos, não requisitamos só um arquivo de vídeo. Vários recursos são trazidos, incluindo arquivos JavaScript, folha de estilo, imagens e propaganda. E como podemos ver na captura de tela abaixo, dois vídeos do Youtube contém 22 requisições HTTP e 624kb baixados. Esse números aumentarão se adicionarmos mais vídeos à página.

Assim, ao invés de carregar o vídeo tão logo a página carregue, traremos e inicializaremos o vídeo quando o usuário requisitá-lo. Esse método é conhecido como carregamento sob demanda–ele minimizará o número de requisições HTTP na página inicial, aprimorando a performance da página.
Sem mais delongas, comecemos.
1. Estrutura HTML
Começaremos constrindo o HTML. Isso é bem simples: usaremos apenas dois elementos div
. A primeira div
envolverá o vídeo embutido do YouTube e a segunda div
estará aninhada à primeira, e a usaremos para criar o botão Play, ilustrando que é um vídeo tocável.
<!-- (1) video wrapper --> <div class="youtube" data-embed="AqcjdkPMPJA"> <!-- (2) the "play" button --> <div class="play-button"></div> </div>
Como podemos ver no código acima, adicionaremos um atributo class
a esses elementos div
e outro data-
à primeira, para especificar o ID do vídeo que embutiremos.
2. CSS
Agora, adicionaremos os estilos:
.youtube { background-color: #000; margin-bottom: 30px; position: relative; padding-top: 56.25%; overflow: hidden; cursor: pointer; } .youtube img { width: 100%; top: -16.84%; left: 0; opacity: 0.7; } .youtube .play-button { width: 90px; height: 60px; background-color: #333; box-shadow: 0 0 30px rgba( 0,0,0,0.6 ); z-index: 1; opacity: 0.8; border-radius: 6px; } .youtube .play-button:before { content: ""; border-style: solid; border-width: 15px 0 15px 26.0px; border-color: transparent transparent transparent #fff; } .youtube img, .youtube .play-button { cursor: pointer; } .youtube img, .youtube iframe, .youtube .play-button, .youtube .play-button:before { position: absolute; } .youtube .play-button, .youtube .play-button:before { top: 50%; left: 50%; transform: translate3d( -50%, -50%, 0 ); } .youtube iframe { height: 100%; width: 100%; top: 0; left: 0; }
Esses estilos lidam, principalmente, com:
- A manutenção da proporção (flexível) do vídeo em 16:9, que é a proporção recomendada para um vídeo do YouTube. Fazendo isso, configuramos o
padding-top
da primeiradiv
em 56.25%. Esse número é derivado da divisão do 9 por 16 e, então, múltiplicado por 100%. - Transformar a segunda
div
em um botão de play e posicioná-la ao centro da primeiradiv
. - Posicionar a miniatura do vídeo do Youtube que buscaremos e adicioná-la via JavaScript.
Nesse ponto, começamos ver os elementos div
parecidos com os típicos reprodutores de vídeo online:

3. JavaScript
Escrevamos um código para buscar a minitura do vídeo, baseado em seu ID, presente no atributo data-embed
. Ao final, ele também embutirá e tocará o vídeo após o clique do usuário.
Miniatura
Para começar, selecionaremos os elementos div
que envolverão o vídeo embutido, aqueles com a classe youtube
.
var youtube = document.querySelectorAll( ".youtube" );
Como podemos ter dois ou mais vídeos, iteraremos por cada um dos elementos selecionados:
... for (var i = 0; i < youtube.length; i++) { // add the code here }
Depois, buscaremos e mostraremos a miniatura do vídeo. O YouTube gera vários tamanhos de imagens, cada um acessível através das seguintes URLs:
- Qualidade Média:
https://img.youtube.com/vi/{video-id}/mqdefault.jpg
(320×180 pixels) - Alta Qualidade:
http://img.youtube.com/vi/G0wGs3useV8/hqdefault.jpg
(480×360 pixels) - Qualidade Padrão (SD):
http://img.youtube.com/vi/G0wGs3useV8/sddefault.jpg
(640×480 pixels) - Resolução Máxima:
http://img.youtube.com/vi/G0wGs3useV8/maxresdefault.jpg
(1920×1080 pixels)
Note que precisamos do ID do video em questão para anexar à URL. Especificamos o ID no atributo data
e podemos buscá-lo usando a propriedade .dataset
do JavaScript.
// loop for (var i = 0; i < youtube.length; i++) { // thumbnail image source. var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg"; }
Como podemos ver no código acima, mostraremos a imagem sddefault.jpg
, uma vez que a maioria dos vídeos vem em definição padrão (SD). Sendo uma imagem de 640x480 pixels, a miniatura é do tamanho certo: nem pequena demais nem grande demais. Você pode optar pela miniatura de alta qualidade, maxresdefault.jpg
, mas lembre-se que o vídeo nem sempre vem em alta resolução (HD), logo, esse tamanho pode não estar disponível.
Carregando a Miniatura Assíncronamente
Carregar a miniatura assíncronamente permitirá a página carregar mais rápido. Se tivermos dois ou mais vídeos embutidos, cada miniatura desses vídeos será carregada simultaneamente, para que não previnam o fluxo de renderização da página:
// loop for (var i = 0; i < youtube.length; i++) { ... // Load the image asynchronously var image = new Image(); image.src = source; image.addEventListener( "load", function() { youtube[ i ].appendChild( image ); }( i ) ); }
Esse código carregará a miniatura a partir da variável source
: Uma vez carregada, anexaremo-na à div
recipiente.

Por último, adicionaremos a parte restante do script.
// loop for (var i = 0; i < youtube.length; i++) { ... youtube[i].addEventListener( "click", function() { var iframe = document.createElement( "iframe" ); iframe.setAttribute( "frameborder", "0" ); iframe.setAttribute( "allowfullscreen", "" ); iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" ); this.innerHTML = ""; this.appendChild( iframe ); } ); }
Esse código faz duas coisas:
- Primeiro, atrela o evento
click
àdiv
recipiente e também executa a função anônima anexada. - Dentro da função, criamos um elemento
iframe
, semelhante ao que o YouTube gera, exceto que, inseriremosautoplay=1
à URL para tocar o vídeo imediatamente quando oiframe
estiver pronto. - Por último, substituiremos o conteúdo da
div
recipente peloiframe
.
Estamos pronto. Pode testar a demo!
Resumindo
Nesse tutorial, aprendemos como carregar vídeos do YouTube sob demanda do usuário. Isso é mais rápido e com consumo de banda mais eficiente que buscar os vídeos junto do carregamento da página, especialmente se tiver muitos vídeos embutidos.
E como podemos ver pela captura de tela, conseguimos um aprimoramento significativo em números de requisições HTTP feitas durante o carregamento inicial. Nesse caso, diminuímos de 22 requisições HTTP para 5!

Próximo Artigo
No próximo tutorial, aprimoraremos nosso código, tornando-o um "Componente Web". Fazendo isso, permitiremos embutir vídeos do YouTube em uma forma mais elegante através de um elemento customizado. Ao invés de dois elementos div
como nesse tutorial, teremos apenas um: <youtube-embed>
.
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post