Como bloquear vídeos do YouTube até o visitante aceitar os cookies

Por que o banner sozinho não basta

Para que o vídeo não carregue antes da escolha, o site precisa controlar quando o iframe recebe seu endereço de origem. O banner informa o visitante; quem impede a requisição é o bloqueio do próprio embed.

O engano do youtube-nocookie

Muita gente trocou youtube.com/embed por youtube-nocookie.com/embed acreditando ter resolvido o problema. Não resolveu o que importa aqui. O domínio é uma opção de incorporação com privacidade aprimorada, mas não significa ausência de comunicação com o Google antes do consentimento: a requisição necessária para carregar o conteúdo continua podendo ocorrer.

Vale separar três coisas que costumam ser tratadas como uma só:

• Requisição de rede: o navegador contata um servidor de terceiro
• Armazenamento de cookie: algo é gravado no navegador do visitante
• Rastreamento: os dados são usados para identificar ou perfilar

O youtube-nocookie evita cookies até a reprodução do vídeo, mas o navegador ainda contata os servidores do YouTube e do Google. Por isso tratamos os dois domínios da mesma forma: o que controlamos é o momento em que o iframe recebe o src.

O que o CookieFácil faz

Antes do consentimento, o endereço do vídeo sai do atributo src e fica guardado em data-cf-src. Sem src, o navegador não faz requisição nenhuma. Não é um vídeo escondido com CSS: é um vídeo que nunca foi buscado.

No lugar dele aparece um aviso nomeando o provedor, com duas escolhas de igual destaque:

O YouTube está bloqueado até você aceitar cookies de marketing.

Permitir e carregar Recusar

O botão de aceite registra consentimento para a categoria correspondente. Essa escolha vale para o site inteiro, não só para este vídeo, e fica registrada como consentimento para a categoria, com a versão do banner que o visitante viu, e não como aceite total. Ao consentir, o src original volta, o aviso some e o vídeo carrega normalmente. Ao recusar, o vídeo continua bloqueado e a recusa fica registrada.

Plataformas cobertas

O YouTube foi verificado em navegador, do bloqueio à restauração. Vimeo e Google Maps são cobertos pela nossa suíte automatizada, ainda sem teste em navegador. No painel, o Google Maps fica na categoria funcional. O Guia de Cookies da ANPD (p. 10) trata conteúdos incorporados como cookies não necessários, então o bloqueio exige consentimento.

Um mapa incorporado pode contatar servidores do Google antes do consentimento. O bloqueio impede que ele carregue até a categoria ser consentida.

Outras plataformas: Dailymotion, Spotify, SoundCloud, Instagram, Facebook, X e TikTok estão no mapa de provedores e seguem o mesmo caminho de código, mas ainda não passaram por teste em navegador. Vamos listá-las aqui conforme forem verificadas.

Dois modos de instalar

Automático. Nada a fazer. Cobre tanto os <iframe> presentes no HTML quanto os injetados depois por JavaScript: removemos o src, guardamos o endereço em data-cf-src e interrompemos qualquer carregamento em andamento.

Uma ressalva: o script é carregado de forma assíncrona, então, para um iframe que já está no HTML, o navegador pode ter iniciado a requisição antes de o script rodar. Nesse caso nós a interrompemos, mas interromper não é o mesmo que impedir.

Manual, quando nenhuma requisição pode partir. Este é o modo mais forte, e a diferença é estrutural: sem src, não existe endereço para o navegador buscar. Não há corrida de tempo a vencer. A garantia vale para aquele iframe: outros recursos da página podem contatar o mesmo provedor.

<iframe data-cf-src="https://www.youtube.com/embed/SEU_VIDEO"
        data-cf-category="marketing"
        width="560" height="315"
        title="Título do vídeo" allowfullscreen></iframe>

Este é o método que recomendamos quando a exigência é impedir a requisição, e não apenas interrompê-la. O Guia de Cookies da ANPD (p. 19) atribui ao controlador a comprovação do consentimento; a documentação do seu caso é sua responsabilidade.

O data-cf-category="marketing" do exemplo é uma configuração, não uma classificação legal universal. A categoria correta depende da finalidade real daquele incorporado no seu site. Troque o atributo conforme a sua finalidade; a decisão sobre qual finalidade se aplica é do controlador.

O que não bloqueamos, de propósito

Um bloqueador que erra atrapalha mais do que ajuda. Dois casos que testamos explicitamente:

• Conteúdo do próprio site. Um <iframe> apontando para o seu domínio nunca é tocado.
• Domínios parecidos. notyoutube.com e youtube.com.evil.com não são bloqueados. A verificação é por host, não por "contém a palavra youtube".

O limite desta funcionalidade

Bloqueamos o conteúdo incorporado. Não é o mesmo que bloquear todo cookie do Google que possa chegar ao seu site por outro caminho. Uma tag do Google Analytics instalada separadamente, por exemplo, é tratada pelo bloqueio de scripts, que é outro mecanismo.

Verificar no seu site

1. Abra uma janela anônima, com extensões desativadas
2. Abra as Ferramentas do Desenvolvedor e vá para Rede
3. Marque Preservar log e Desativar cache
4. Recarregue a página sem interagir com o banner
5. Filtre pelo domínio do provedor: youtube, vimeo, maps
6. Anote o que aparece antes do consentimento
7. Aceite a categoria correspondente e repita

O que esse teste mostra é o comportamento de rede observado naquela sessão, naquele navegador. É evidência técnica útil, não é, por si só, uma declaração de conformidade legal.