Como adicionar um vídeo de fundo ao seu site

Principais conclusões

• Use um MP4 de 6 a 15 segundos, sem som e em ciclo, com uma imagem de poster.

• Mantenha-o em poucos MB: 1080p ou menos, sem áudio, fast start.

• Adicione uma sobreposição para o texto ser legível e uma opção de pausa para acessibilidade.

• Respeite prefers-reduced-motion e considere usar apenas um poster no telemóvel.

Boas práticas para vídeos de fundo

• 6 a 15 segundos, ciclo contínuo.

• Sem som, autoplay, playsinline.

• Comprimido (aponte para alguns MB), 1080p ou menos.

• Uma imagem de poster para ligações lentas.

• Uma sobreposição para o texto se manter legível.

HTML e CSS para um vídeo de fundo

<section class="hero">
  <video class="bg" autoplay muted loop playsinline poster="poster.jpg">
    <source src="loop.mp4" type="video/mp4">
  </video>
  <div class="content">…</div>
</section>

.hero{position:relative;overflow:hidden}
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

Nos construtores de sites

Squarespace: Background da secção → Video. Webflow: elemento Background Video. Wix: fundo da faixa → Video. Temas do WordPress e Elementor: fundo da secção → Video.

Vídeo de fundo vs. galeria de vídeos

Um ciclo de fundo cria ambiente; não serve para conteúdo que as pessoas devam ver. Coloque os vídeos para ver num leitor ou numa galeria abaixo do destaque.

A via sem código

Adicione uma galeria de vídeos por baixo do destaque para os vídeos que as pessoas devem mesmo ver.

Experimente a Elfsight Video Gallery

Acessibilidade em vídeos de fundo

• Adicione um botão de pausa para o movimento em ciclo.

• Respeite prefers-reduced-motion — mostre o poster em vez do vídeo.

• Mantenha o contraste do texto legível sobre todos os fotogramas.

@media (prefers-reduced-motion: reduce){
  .bg{display:none}
  .hero{background:url(poster.jpg) center/cover}
}

Considerações para telemóveis

Os navegadores móveis reproduzem automaticamente vídeo sem som e na página, mas os dados e a bateria contam. Considere um ficheiro mais pequeno ou apenas a imagem de poster em ecrãs pequenos.

Onde obter imagens de fundo

Filme as suas próprias imagens do produto ou da equipa, para maior autenticidade, ou use vídeo de stock licenciado. Corte para um ciclo contínuo e remova o áudio.

Codificar o ciclo com ffmpeg

Exporte o seu clipe e depois crie um MP4 silencioso, pronto para a web, com fast start (para começar a reproduzir antes de ser totalmente transferido):

# MP4 (H.264), 1080p wide, no audio, fast start
ffmpeg -i input.mov -an -vf "scale=1920:-2" -c:v libx264 -crf 28 -preset slow -movflags +faststart loop.mp4

# Optional smaller WebM (VP9)
ffmpeg -i input.mov -an -vf "scale=1920:-2" -c:v libvpx-vp9 -crf 38 -b:v 0 loop.webm

# Poster image from the first frame
ffmpeg -i loop.mp4 -frames:v 1 poster.jpg

Aumente o valor de CRF para ficheiros mais pequenos e diminua-o para maior qualidade. Num fundo, um detalhe mais suave serve — o texto ficará por cima.

Manter o texto legível

.hero{position:relative;isolation:isolate}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.55));z-index:-1}
.hero .bg{z-index:-2}

Uma sobreposição de gradiente escuro mantém os títulos brancos legíveis sobre fotogramas claros. Verifique o contraste na parte mais clara do ciclo.

Orçamento de desempenho

Vídeo de fundo vs. uma secção de vídeo

Um ciclo de fundo cria atmosfera; ninguém o vê com atenção. Se quer que as pessoas vejam mesmo — uma demonstração de produto, testemunhos, um canal — dê a esses vídeos a sua própria secção com um leitor, onde possam ver tudo com som.