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.
Vídeo rodando no fundo do topo
Tudo é feito no seu aparelho: nada é enviado para a internet.
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
- Informe os endereços do vídeo e da imagem de capa.
- Escreva o título e o texto e ajuste a camada escura.
- 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.