Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Web Components

Como Criar Componentes Web Para Embutir Vídeos do YouTube

by
Difficulty:AdvancedLength:ShortLanguages:

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

No tutorial anterior, "Como 'Carregar sob Demanda' Vídeos Embutidos do YouTube", vimos como carregar um vídeo do YouTube apenas no clique do usuário. Isso torna nossa página mais rápida, especialmente se tivermos vários vídeos.

Se o acompanhou, deve ter percebido que adicionamos alguns elementos div, classes, estilos e scripts para fazê-lo funcionar.

Ter de adicioná-los toda vez não é a abordagem mais conveniente... E se pudéssemos substituir tudo por um único elemento, algo como <youtube-embed>? É exatamente isso que faremos nesse tutorial. Criaremos um elemento HTML customizado e funcional, usando "Componentes Web". Acesse a demonstração e a desseque.

shadow-root Read on to find out more
#shadow-root? Leia mais para descobrir

Breve Introdução

Antes de sujarmos nossas mãos, recomendo que dê uma olhada nos fantásticos tutoriais do Kezz Bracey, Como Criar Seus Próprios Componentes HTML Com Componentes Web. Você verá explicações sobre os Componentes Web e coisas como "DOM Sombra" (também conhecida como "Raiz Sombra"), Importação HTML e o elemento <template>.

Começando

Primeiro, precisamos criar um novo arquivo HTML. Nomearemo-lo de "youtube-embed.html". Ele conterá o código que registrará e construirá nosso novo elemento, <youtube-embed>.

Ele incluirá o JavaScript a seguir, então vejamos seu conteúdo:

Um bocado de coisa acontecendo, numeradas logicamente, então vejamos o que ele faz:

  1. Aqui, definimos duas variáveis referindo-se a dois objetos "document" diferentes. A primeira variável, thatDoc, refere-se ao documento principal, onde implantaremos nosso elemento customizado. A segunda variável, thisDoc, é o documento onde registraremos nosso novo elemento HTML, nesse caso, youtube-embed.html.
  2. Depois, definimos uma variável para guardar o conteúdo do elemento <template> (trataremos sobre isso logo).
  3. Criaremos um novo objeto baseado no objeto HTMLElement, permitindo o elemento herdar métodos e propriedades de qualquer elemento HTML, como id, className, clientHeiht, scrollTop e childNodes.
  4. createdCallback é uma função que será instanciada imediatamente quando o novo elemento for criado.
  5. Dentro da função callback, criaremos a "DOM Sombra", que determinará a forma do nosso elemento, <youtube-embed>, no navegador. Também iniciaremos uma função customizada aqui.
  6. Por fim, registraremos nosso elemento, para que o navegador o reconheça.

Importando HTML

Agora, no documento principal, onde nossos vídeos serão embutidos, importaremos youtube-embed.html.

Polyfill para Componentes Web

Componentes Web são um conjunto de tecnologias Web (Modelos, Importação HTML, Elemento Customizado, DOM Sombra). Algunas navegadores como Opera e Chrome já suportam esses recursos, mas o Firefox, Edge e o Safari as suportam apenas parcialmente ou não suportam, devido a divergência de visões.

Logo, se quiser que seu elemento possa ser usado em vários navegadores (claro que quer), você também precisará do polyfill para Componentes Web.

Uma vez feito tudo isso e colocado os arquivos em seus devidos lugares, estaremos prontos para adicionar outros trechos de código para trazer nosso elemento à vida.

Trazendo o Elemento Customizado à Vida

Para começar, no "youtube-embed.html", adicionamos o elemento <template>. Então, aninhamos a div e os estilos que criamos no tutorial anterior.

Por hora, se implantarmos nosso elemento <youtube-embed> e inspecionamo-lo com o Chrome DevTools, veremos os elementos div e os estilos que acabamos de adicionar aparecendo dentro da DOM Sombra do elemento.

The Custom Element Shadow DOM Tree viewed in Chrome DevTools

Selecionando um Elemento da DOM Sombra

Voltando ao JavaScript, precisamos adicionar o código abaixo para selecionar na DOM Sombra o elemento recipiente do vídeo. Perceba que usamos querySelector() da nossa variável shadowRoot. Esse é o elemento que anexaremos o iframe do YouTube, posteriormente.

Atributo Customizado

No tutorial anterior, usamos o atributo data-embed para passar o ID do vídeo do YouTube. Como lembrete, o ID é usado para buscar a imagem miniatura do vídeo e criar a URL correta do vídeo a embutir.

No caso dos Componentes Web, um atributo nomeado customizado é aceitável. Aqui, por exemplo, podemos introduzir o atributo embed.

Dentro da nossa função createdCallbak, adicionaremos o código a seguir para obter o valor do atributo embed.

Passaremos essas duas variáveis para nossa função.

Fazendo Acontecer

Talvez esteja com a cabeça cheia, mas não achei um nome melhor para a função, logo doTheThing.

Essa função leva as mesmas linhas de código que adicionamos no nosso tutorial anterior, com alguns ajustes. A função mostrará imagens miniaturas dos vídeos do YouTube e anexará o vídeo no elemento recipiente, .youtube, quando o usuário clicar.

E estamos prontos! Veja o código fonte e o site demonstração.

Uso

Nesse tutorial, tornamos o códido do tutorial anterior em um Componente Web. Agora, podemos embutir vídeos do YouTube de forma mais elegante, usando o novo elemento: <youtube-embed>:

Todo o código (JavaScript, CSS e HTML) está encapsulado em um HTML separado, prevenindo que erros em potencial afetem o site inteiro. E sempre que precisarmos reusá-lo em outros projetos, podemos importar o HTML youtube-embed.html.

youtube web component demo
Veja a demonstração no Github.

Resumindo

Esse é apenas um exemplo de como usar os Componentes Web. Você pode encontrar outras implementações maravilhosas de Componentes Web no site customelements.io. Por último, espero que tenha curtido o tutorial e que tenha sido fácil de acompanhar.

Leitura Adicional

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