PT
PortuguêsEnglishEspañol
Todas as ferramentas
Ferramentas para programador 100% grátis

Vídeo de fundo para site (HTML5)

Informe o endereço do vídeo (MP4 ou WebM) e da imagem de capa. O código já vem com os atributos que os navegadores exigem para tocar sozinho.

Voltar para Blocos prontos para site

Vídeo rodando no fundo do topo

Tudo é feito no seu aparelho: nada é enviado para a internet.


Disponível em: Português

Publicidade

Vídeo de fundo para site (HTML5): para que serve

Um vídeo curto rodando no fundo do topo do site mostra o ambiente, o produto ou o serviço logo de cara. Para funcionar no celular, o vídeo precisa estar sem som e ter os atributos muted, autoplay e playsinline.

O gerador monta a seção com a tag video em MP4 e WebM, imagem de capa, camada escura ajustável para o texto ficar legível, título e texto, e um botão de pausar, como a WCAG pede para conteúdo que se move por mais de 5 segundos. Para quem pediu menos movimento, o vídeo já começa pausado.

Como usar

  1. Informe os endereços do vídeo e da imagem de capa.
  2. Escreva o título e o texto e ajuste a camada escura.
  3. Copie o código e cole no topo da página.

Quando usar

  • Topo de site de restaurante ou hotel.
  • Landing page de evento.
  • Página de imobiliária ou academia.

Perguntas frequentes

Por que o vídeo não toca sozinho no celular?

Os navegadores só deixam tocar sozinho vídeo sem som. O vídeo precisa dos atributos muted, autoplay e, no iPhone, playsinline, senão abre em tela cheia ou não toca. O código já traz os três.

Que tamanho de arquivo usar?

Vídeo de fundo deve ser curto (10 a 20 segundos em loop) e leve, de preferência menos de 3 a 5 MB, em 720p ou 1080p sem áudio. Comprima antes de publicar; um vídeo pesado atrasa o carregamento no celular.

E quem prefere menos movimento?

Para quem ativou a redução de movimento no sistema, o script pausa o vídeo e fica só a imagem de capa. Também há um botão de pausar, que a WCAG pede para conteúdo que se move por mais de 5 segundos.

É grátis mesmo?

Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.

Ferramentas parecidas

As ferramentas são oferecidas como estão, sem garantia. Não nos responsabilizamos pelos resultados nem pelo uso que se faz deles.