Como incorporar vídeos do YouTube no site de forma leve

Veja como incorporar vídeos em seu site sem precisar pré-carregar o player do YouTube.

01/02/2024

Como incorporar vídeos do YouTube no site de forma leve

Como incorporar vídeos do YouTube no site de forma leve

Introdução

Incorporar vídeos do YouTube em sites é uma tarefa comum, mas pode tornar o site mais pesado. O método tradicional carrega o player mesmo se ninguém clicar para assistir ao vídeo, aumentando o tempo de carregamento da página.

Neste tutorial, abordaremos uma forma mais leve de incorporar vídeos do YouTube. Em vez de carregar o player de imediato, ele será carregado apenas se o usuário clicar para assistir. Essa técnica não só melhora a velocidade da página, mas também oferece mais controle ao usuário.

Exemplo de Código

O código abaixo incorpora dois vídeos do YouTube na página, sem que o player tenha que ser carregado a cada acesso.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>YouTube</title>
</head>
<body style="font-family: sans-serif;">

<youtube-video video-id="_RZm7E9E-CM" style="width: 720px;"></youtube-video>

<script>
class YouTubeVideo extends HTMLElement {
	constructor() {
		super();
		this.attachShadow({ mode: 'open' });
		this.shadowRoot.appendChild(this.getStyle());
		this.addEventListener('click', () => {
			this.classList.add('clicked');
			this.shadowRoot.appendChild(this.getIframe());
		});
	}

	getStyle() {
		const style = document.createElement('style');
		style.textContent = `
			:host {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				max-width: 100%;
				aspect-ratio: 16/9;
				cursor: pointer;
				background: silver url('https://img.youtube.com/vi/${this.getAttribute('video-id')}/0.jpg') no-repeat center / cover;
			}
			:host:before {
				content: '';
				width: 15%;
				aspect-ratio: 1;
				border-radius: 50%;
				background: white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 122.88"><polygon points="140,60.97 32,122.88 32,0 140,60.97" fill="black" /></svg>') no-repeat center / 50% 50%;
				filter: drop-shadow(0px 0px 16px rgba(0,0,0,0.3));
				transition: all 0.3s ease;
			}
			:host(.clicked):before {
				opacity: 0;
			}`;
		return style;
	}

	getIframe() {
		const iframe = document.createElement('iframe');
		iframe.setAttribute('frameborder', '0');
		iframe.setAttribute('allow', 'autoplay');
		iframe.setAttribute('allowfullscreen', '');
		iframe.style.cssText = `position: absolute; top: 0; left: 0; width: 100%; height: 100%;`;
		const params = new URLSearchParams({ autoplay: 1, modestbranding: 1, rel: 0, iv_load_policy: 3, showinfo: 0 });
		['controls', 'start', 'end', 'loop', 'playlist'].forEach(
			attr => { if (this.hasAttribute(attr)) params.set(attr, this.getAttribute(attr)); }
		);
		iframe.src = `https://www.youtube-nocookie.com/embed/${this.getAttribute('video-id')}?${params}`;
		iframe.onload = () => this.style.background = 'transparent';
		return iframe;
	}
}
customElements.define('youtube-video', YouTubeVideo);
</script>

</body>
</html>

Veja uma demonstração

Ao clicar na imagem abaixo, o player do YouTube será carregado e o vídeo será reproduzido automaticamente.

Explicando o Código

Tag <youtube-video>

A tag <youtube-video> representa o componente personalizado. O atributo video-id deve ser usado para especificar o ID do vídeo do YouTube que se deseja exibir. Por exemplo:

<youtube-video video-id="dQw4w9WgXcQ" style="width: 720px;"></youtube-video>

Criação do Web Component YouTubeVideo

O Web Component YouTubeVideo é definido estendendo a classe HTMLElement. A função constructor configura o Shadow DOM e adiciona o evento click.


class YouTubeVideo extends HTMLElement {
	constructor() {
		super();
		this.attachShadow({ mode: 'open' });
		this.shadowRoot.appendChild(this.getStyle());
		this.addEventListener('click', () => {
			this.classList.add('clicked');
			this.shadowRoot.appendChild(this.getIframe());
		});
	}
	// Métodos getStyle e getIframe são definidos aqui
}
customElements.define('youtube-video', YouTubeVideo);

Estilização do Componente com :host e getStyle

O método getStyle cria um elemento de estilo que contém as regras CSS para estilizar o componente. Utilizamos o pseudo-seletor :host para definir estilos diretamente no componente <youtube-video>. Isso inclui configurações de posição, flexbox, aspect ratio, e a imagem de fundo que é a miniatura do vídeo do YouTube.


getStyle() {
	const style = document.createElement('style');
	style.textContent = `
		:host {
			position: relative; 
			display: flex; 
			justify-content: center; 
			align-items: center;
			width: 100%; 
			max-width: 100%; 
			aspect-ratio: 16/9; 
			cursor: pointer;
			background: silver url('https://img.youtube.com/vi/${this.getAttribute('video-id')}/0.jpg') no-repeat center / cover;
		}
		:host:before {
			content: ''; 
			width: 15%; 
			aspect-ratio: 1; 
			border-radius: 50%;
			background: white url('data:image/svg+xml;utf8,') no-repeat center / 50% 50%;
			filter: drop-shadow(0px 0px 16px rgba(0,0,0,0.3));
			transition: all 0.3s ease;
		}
		:host(.clicked):before {
			opacity: 0;
		}`;
	return style;
}

Criação e Configuração do <iframe> com getIframe

O método getIframe cria e configura um <iframe> que será usado para carregar o vídeo do YouTube. Este método configura o iframe para iniciar o vídeo automaticamente (autoplay), permite o modo tela cheia, e define os parâmetros da URL do vídeo. O iframe é posicionado para cobrir completamente o componente, permitindo que o vídeo seja exibido no espaço designado.


getIframe() {
	const iframe = document.createElement('iframe');
	iframe.setAttribute('frameborder', '0');
	iframe.setAttribute('allow', 'autoplay');
	iframe.setAttribute('allowfullscreen', '');
	iframe.style.cssText = 'position: absolute; top: 0; left: 0; width: 100%; height: 100%;';
	const params = new URLSearchParams({ autoplay: 1, modestbranding: 1, rel: 0, iv_load_policy: 3, showinfo: 0 });
	['controls', 'start', 'end', 'loop', 'playlist'].forEach(attr => {
		if (this.hasAttribute(attr)) params.set(attr, this.getAttribute(attr));
	});
	iframe.src = `https://www.youtube-nocookie.com/embed/${this.getAttribute('video-id')}?${params}`;
	iframe.onload = () => this.style.background = 'transparent';
	return iframe;
}

Conclusão

Ao usar o Web Component <youtube-video> para incorporar vídeos do YouTube, temos uma alternativa mais eficiente em comparação com o método de incorporação padrão. Esta abordagem melhora significativamente o tempo de carregamento da página ao carregar o player do YouTube somente após o usuário clicar para iniciar a reprodução do vídeo.

Esperamos que as técnicas e métodos apresentados aqui inspirem você a explorar mais sobre Web Components e a aplicá-los em seus próprios projetos web.

Domínios hospedados
Clientes satisfeitos