Incorporação leve de YouTube e Vimeo: gerador de fachada
Cole as ligações dos vídeos e obtém um bloco pronto que mostra a pré-visualização e só carrega o leitor depois do clique. Zero bibliotecas externas: tudo o que é preciso está dentro do código gerado.
watch?v=, youtu.be, /embed/, /shorts/, youtube-nocookie.com. Vimeo: vimeo.com/ID, player.vimeo.com/video/ID, privados vimeo.com/ID/HASH. A marca temporal ?t= / &start= é transposta para a fachada.
Detalhes opcionais separados por uma barra vertical: URL | Título | URL da miniatura.
L:A ou L/A. Vai para a propriedade CSS aspect-ratio.
hqdefault existe para qualquer vídeo. maxresdefault só existe quando o original foi carregado em 720p ou superior — caso contrário a imagem simplesmente não abre e o espectador vê um retângulo vazio.
aria-label do botão e para o title do iframe.
i.ytimg.com do YouTube: só a API oEmbed o devolve e nós não podemos fazer-lhe um pedido — a ferramenta funciona sem rede. Por isso, carregue a imagem para a biblioteca de multimédia do site e cole a ligação. Sem ela fica um marcador em gradiente com um botão play.
Cole pelo menos uma ligação para obter o código.
Colar no bloco do Gutenberg «HTML personalizado». O bloco contém <style> e <script>: se o seu perfil não tiver a permissão unfiltered_html ou houver um plugin de segurança que remove scripts, a fachada mostra a miniatura, mas o clique não funciona.
O código é montado no seu navegador. Nem o bloco gerado nem a própria pré-visualização fazem qualquer pedido externo — as imagens de i.ytimg.com são mostradas na pré-visualização como endereços e não são carregadas.
Um único vídeo incorporado custa mais de um megabyte antes do primeiro clique
Um iframe padrão do YouTube carrega cerca de 1,3 MB em duas dezenas de pedidos a sete domínios de terceiros — ainda antes de o visitante ter decidido ver o vídeo. Numa página com três vídeos é o triplo, e é quase sempre isso que estraga os indicadores de velocidade em telemóvel. A fachada resolve o problema de forma direta: primeiro mostra-se apenas uma imagem de pré-visualização com um botão de reprodução, e o leitor verdadeiro só é inserido no momento do clique. Antes do clique, a página pesa uma ordem de grandeza menos. Existe uma biblioteca popular para isto, mas todas as instruções aconselham carregá-la a partir de um CDN alheio — ou seja, retirar um pedido externo e acrescentar outro. Aqui o código gerado é totalmente autossuficiente: os estilos e o script ficam dentro do bloco. Há ainda um efeito adicional na privacidade. O iframe padrão coloca cookies de rastreio antes sequer de haver visionamento. O domínio youtube-nocookie.com adia isso para o início da reprodução, e a fachada para o clique. Para sites dirigidos a público europeu, isto toca diretamente nos requisitos de consentimento de cookies.