Como Criar Componentes Web Para Embutir Vídeos do YouTube

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.

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

• 
  HTML5
  Como Criar Seus Próprios Componentes HTML Com Componentes Web
  Kezz Bracey

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:

( function( window, document, undefined ) {

    // (1)
    var thatDoc = document;
    var thisDoc = ( thatDoc._currentScript || thatDoc.currentScript ).ownerDocument;

    // (2)
    var template = thisDoc.querySelector( 'template' ).content;

    // (3)
    var YoutubeProto = Object.create( HTMLElement.prototype );

    // (4)
    YoutubeProto.createdCallback = function() {
      // (5)
        var shadowRoot = this.createShadowRoot();
        var clone = thatDoc.importNode(template, true);
        	shadowRoot.appendChild( clone );

		// Add custom code here...
    };

    // (6)
    window.youtubeEmbed = thatDoc.registerElement( 'youtube-embed', {
        prototype : YoutubeProto
    });

})( window, document );

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.

<script src="webcomponents.min.js"></script>
<link rel="import" href="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.

<script src="webcomponents.min.js"></script>

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.

<template>
    <style>
        .youtube {
            background-color: #000;
            margin-bottom: 30px;
            position: relative;
            cursor: pointer;
            padding-top: 56.25%;
        }
        .youtube img {
            width: 100%;
            top: 0;
            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;
        }
    </style>
    <div class="youtube">
    	<div class="play-button"></div>
    </div>
</template>

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.

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.

YoutubeProto.createdCallback = function() {
    ...
	var video = shadowRoot.querySelector( ".youtube" ); // Select the video wrapper
};

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.

<youtube-embed embed="AqcjdkPMPJA">

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

YoutubeProto.createdCallback = function() {
    ...
	var video = shadowRoot.querySelector( ".youtube" ); // Select the video wrapper.
	var embed = this.getAttribute( "embed" ); // Get the embed attribute value.
};

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.

YoutubeProto.createdCallback = function() {
    ...

    var embed = this.getAttribute( "embed" );
    var video = shadowRoot.querySelector( ".youtube" );

    this.doTheThing( embed, video );
};

YoutubeProto.doTheThing = function( embedID, videoElem ) {
	var source = "https://img.youtube.com/vi/"+ embedID +"/sddefault.jpg";
	var image  = new Image();

    image.src = source;

    image.addEventListener( "load", function() {
        videoElem.appendChild( image );
    });

    videoElem.addEventListener( "click", function() {

        var iframe = document.createElement( "iframe" );

            iframe.setAttribute( "frameborder", "0" );
            iframe.setAttribute( "allowfullscreen", "" );
            iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ embedID +"?rel=0&showinfo=0&autoplay=1" );

            this.innerHTML = "";
            this.appendChild( iframe );
    } );
};

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

<youtube-embed embed="AqcjdkPMPJA"></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.

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

• WebComponents.org um lugar para discutir e desenvolver as melhores práticas dos componentes web
• Como Criar Seus Próprios Componentes HTML Com Componentes Web
• Elementos Customizados: Explorando o mundo dos Componentes Web
• Lições práticas de um ano construindo componentes web Google I/O 2016
• Polymer: tornado Componentes Web acessíveis