Vídeo incorporado com carregamento ao clicar

Um vídeo incorporado comum começa a conversar com a plataforma de vídeo assim que a página abre, quer alguém assista, quer não. Este gerador escreve um que fica quieto até o visitante apertar play.

Qualquer formato do YouTube funciona (watch?v=, youtu.be, shorts, embed, inclusive com um início t=), e também um link do Vimeo, mesmo não listado, que traga um código h=.

O que o código deve fazer

O código é gerado pelo seu navegador. O link que você cola não é transmitido ao nosso servidor nem a mais ninguém.

O que um vídeo incorporado comum faz antes de alguém assistir

O trecho que você copia do menu Compartilhar de um vídeo é um <iframe>, uma pequena janela para outro site colocada dentro da sua página. O navegador preenche essa janela assim que desenha a página. Para um único vídeo do YouTube, são cerca de vinte requisições e várias centenas de kilobytes de script, buscados nos servidores do Google para cada visitante, inclusive todos os que rolam a página sem parar.

Cada uma dessas requisições leva o endereço IP do visitante e o endereço da sua página. O player também pode ler e gravar no próprio armazenamento dele no navegador. Resultado: sua página fica mais lenta, e seus visitantes são notados por uma empresa que eles nunca escolheram contatar.

Os dois tipos de código que esta ferramenta escreve

Carregar ao clicar
Sua página recebe um link com cara de quadro de vídeo, com uma imagem de capa, um triângulo de play e um rótulo acessível. Um script curto, incluído uma única vez, espera um clique nesse link e só então coloca o player de verdade no lugar, com autoplay=1, para que um toque baste na maioria dos aparelhos. Se o script estiver ausente ou bloqueado, o link continua funcionando e abre o vídeo na plataforma em uma nova aba.
Iframe simples no domínio de privacidade aprimorada
Nenhum script. O player carrega junto com a página, mas a partir de youtube-nocookie.com, ou do Vimeo com dnt=1, e com loading="lazy", para que um vídeo lá embaixo na página espere o visitante rolar até perto dele.

Nos dois casos, o player fica numa caixa dimensionada com a propriedade CSS aspect-ratio, então ele se ajusta à coluna onde você o colocar. Um link /shorts/ é detectado e recebe uma caixa 9:16 limitada a 360 pixels de largura.

Sua escolhaParâmetro do YouTubeParâmetro do Vimeo
Momento de iníciostart=90#t=90s
Legendas ativadascc_load_policy=1, cc_lang_preftexttrack=en
Idioma do playerhl=ennão disponível
Sugestões só do próprio canalrel=0não é necessário
Vídeo não listadofunciona como estácódigo h= mantido do link

A imagem de capa é o último vazamento

No YouTube, o código de carregamento ao clicar aponta por padrão para a miniatura do vídeo em i.ytimg.com. Esse servidor pertence ao Google. Ele não grava cookie, mas vê o endereço IP do visitante quando a imagem carrega. Para chegar a zero requisições de terceiros, salve um quadro do vídeo, envie para o seu próprio site e cole o endereço dele no campo da capa. Use um endereço https://, porque os navegadores recusam imagens inseguras em páginas seguras.

O Vimeo não tem endereço de miniatura previsível, então o padrão ali é um quadro escuro com o seu título. O mesmo campo de capa o substitui por uma imagem.

As expressões “privacidade aprimorada” e “sem cookie” descrevem o que acontece antes da reprodução. Assim que o visitante aperta play, o vídeo é transmitido pelo YouTube ou pelo Vimeo, que passam a receber os dados técnicos de costume desse visitante. O carregamento ao clicar não muda isso. Ele deixa a decisão com o visitante.

Colar o código no seu site

O resultado é HTML puro com estilos inline, então não depende do seu tema.

  • WordPress: adicione um bloco “HTML personalizado” e cole. Administradores podem salvar a parte <script>, mas contas com a função Editor numa rede multisite podem tê-la removida ao salvar. Se isso acontecer, a capa continua apontando para o vídeo, ou você pode passar para o iframe simples.
  • Squarespace, Wix, Webflow, Shopify: use o bloco de código ou de incorporação, não o bloco de vídeo nativo, que traria de volta o player padrão.
  • HTML estático: cole onde o vídeo deve ficar. Com vários vídeos na mesma página, cole cada trecho completo. O script verifica se já foi executado.
  • Content-Security-Policy: permita www.youtube-nocookie.com ou player.vimeo.com em frame-src. Uma política que proíbe scripts inline vai bloquear o script de carregamento ao clicar; nesse caso, mova-o para um arquivo servido por você.

Sempre preencha o campo de título. Ele vira o title do iframe e o rótulo do link de play, e é isso que um leitor de tela anuncia. Deixe vazio e tudo o que o ouvinte escuta é “YouTube video”.

Perguntas frequentes

O youtube-nocookie.com realmente não grava cookies?

Ele não grava cookies de rastreamento enquanto o player está parado. O script do player continua vindo do Google e pode usar o armazenamento local do navegador. Depois que o visitante aperta play, o YouTube trata a sessão quase como qualquer outra visualização. Só a versão com carregamento ao clicar não envia absolutamente nada antes do clique.

Ainda preciso de consentimento de cookies para um vídeo incorporado?

Depende da lei que se aplica a você, e essa é uma questão jurídica que esta ferramenta não pode resolver. Do lado técnico, o vídeo com carregamento ao clicar e uma capa hospedada no seu próprio site não faz nenhuma requisição a terceiros até o visitante agir, que é o comportamento que a maioria das regras de consentimento pede. Mencione a plataforma de vídeo no seu aviso de privacidade.

Por que o vídeo precisa de dois toques em alguns celulares?

O código pede ao player que comece sozinho depois do clique. Alguns navegadores móveis, e celulares em modo de economia de energia, bloqueiam a reprodução automática com som dentro de um iframe. O player aparece então pausado e precisa de um segundo toque.

Um vídeo com carregamento ao clicar deixa minha página mais rápida?

Sim, e dá para medir. A página deixa de baixar os scripts do player logo de início, o que tira várias centenas de kilobytes e boa parte do trabalho da thread principal por vídeo. Compare antes e depois com o detalhamento do tamanho da página.

Meu vídeo do Vimeo mostra um erro na prévia. Por quê?

O vídeo provavelmente é não listado ou restrito. Use o link do botão Compartilhar do Vimeo, que tem a forma vimeo.com/123456789/abc123def4. A segunda parte é uma chave que o player exige. Se o vídeo estiver limitado a certos domínios, adicione o seu site nas configurações de privacidade dele no Vimeo.

Posso colar um código de iframe completo em vez de um link?

Sim. Se o texto colado contiver um atributo src="…", a ferramenta lê o endereço dentro dele e reconstrói a incorporação a partir daí.

Verificações relacionadas