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 primeira div 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 primeira div.
• 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, inseriremos autoplay=1 à URL para tocar o vídeo imediatamente quando o iframe estiver pronto.
• Por último, substituiremos o conteúdo da div recipente pelo iframe.

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>.

• Componentes Web
  Como Criar um Componente Web para Embutir Vídeos do YouTube
  Thoriq Firdaus