Site com vídeo de fundo: peso, reprodução automática e acessibilidade

Em um site com vídeo de fundo, um vídeo mudo e em loop roda atrás de uma seção, quase sempre o destaque principal, enquanto o título e os botões ficam por cima. Bem feito, ele é leve, discreto e opcional: começa sozinho sem som, mostra uma imagem parada acabada antes de carregar, pausa para quem prefere menos movimento e nunca dificulta a leitura das palavras. Mal feito, é a coisa mais pesada e mais distrativa da página.

Quando um vídeo de fundo vale a pena

Um vídeo de fundo merece seu lugar quando o movimento é a mensagem: água para uma escola de natação, vapor para uma torrefação de café, um material flutuando devagar para uma marca cujo visual é a identidade. Se o movimento é só decoração, uma opção mais leve costuma ficar igualmente bonita. Compare as opções antes de se comprometer.

O HTML de um vídeo de fundo

Quatro atributos fazem o trabalho essencial. muted deixa o navegador reproduzir automaticamente, já que os navegadores em geral bloqueiam a reprodução automática com som. playsinline impede o iPhone de abrir o vídeo em tela cheia. loop repete o vídeo, e poster mostra uma imagem parada enquanto ele carrega. Como é decorativo, esconda o vídeo dos leitores de tela.

<section class="hero">
  <video class="hero-video" autoplay muted loop playsinline
         poster="/media/hero-poster.jpg" aria-hidden="true">
    <source src="/media/hero.webm" type="video/webm">
    <source src="/media/hero.mp4" type="video/mp4">
  </video>

  <div class="hero-content">
    <h1>Colour that moves with you</h1>
    <button class="hero-pause" type="button">Pause background</button>
  </div>
</section>

.hero {
  position: relative;
  min-height: 80vh;
  overflow: hidden;
  background: #120a2e; /* shows before the poster arrives */
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills any shape without stretching */
}
.hero-content {
  position: relative; /* sits above the video */
}

O guia da MDN sobre o elemento video lista todos os atributos. Lembre que a reprodução automática é um pedido, não uma garantia: alguns celulares em modo de economia de energia não reproduzem. É por isso que o pôster precisa parecer um design acabado por si só.

Como manter o arquivo de vídeo leve

O vídeo costuma ser o maior arquivo de qualquer página que tenha um. Imagens suaves e lentas comprimem muito melhor que imagens nítidas e agitadas, então a escolha de design também é uma escolha de desempenho. Mantenha o loop curto, por volta de 8 a 15 segundos, remova a faixa de áudio por completo e não sirva um tamanho maior do que o destaque chega a exibir. Defina um orçamento de tamanho antes de exportar e confira o resultado real no painel de rede do navegador.

# MP4 (H.264): silent, web-ready, starts playing before it fully downloads
ffmpeg -i hero-master.mov -an -c:v libx264 -crf 26 -preset slow \
  -pix_fmt yuv420p -movflags +faststart -vf "scale=1920:-2" hero.mp4

# WebM (VP9): often smaller at similar quality
ffmpeg -i hero-master.mov -an -c:v libvpx-vp9 -crf 36 -b:v 0 \
  -vf "scale=1920:-2" hero.webm

# Poster: the first frame as a JPEG
ffmpeg -i hero.mp4 -frames:v 1 -q:v 3 hero-poster.jpg

Destaque de site 1920 × 1080

1920 × 1080

Recorte no celular

1080 × 1920

Movimento reduzido e um botão de pausa

Alguns visitantes configuram o aparelho para reduzir o movimento porque ele causa tontura ou mal-estar. Respeite isso mostrando o pôster em vez do vídeo. Além disso, o critério Pausar, Parar, Ocultar da WCAG pede que conteúdo em movimento que começa sozinho e dura mais de cinco segundos, ao lado de outro conteúdo, possa ser pausado. Um botão de pausa pequeno e visível resolve.

const video = document.querySelector('.hero-video')
const button = document.querySelector('.hero-pause')
const reduce = matchMedia('(prefers-reduced-motion: reduce)')

function follow() {
  if (reduce.matches) video.pause()
  else video.play().catch(() => {}) // the browser may still refuse
}
reduce.addEventListener('change', follow)
follow()

button.addEventListener('click', () => {
  if (video.paused) {
    video.play()
    button.textContent = 'Pause background'
  } else {
    video.pause()
    button.textContent = 'Play background'
  }
})

Movimento reduzido explica a configuração e o que mais reduzir.

Texto legível sobre um vídeo de fundo

O texto sobre vídeo precisa se ler contra todos os quadros, não só contra o pôster. A solução comum é uma camada escura sobre o vídeo inteiro, que funciona mas achata a imagem. Opções melhores: escolha uma filmagem calma com uma região tranquila onde vão as palavras, mantenha o movimento mais claro longe do título e use um peso grande e pesado. O nosso guia de texto sobre imagem traz sete técnicas que valem igualmente para vídeo.

Checklist do vídeo de fundo

1. 1

   Decida se precisa mesmo ser vídeo

   Filmagem, ou movimento que precisa ficar idêntico em todo lugar. Caso contrário, considere CSS ou um shader.

2. 2

   Curto, lento e silencioso

   8 a 15 segundos, sem faixa de áudio, um loop que se emenda.

3. 3

   Exporte dois formatos e um pôster

   WebM e MP4, no máximo no tamanho em que aparece, mais um primeiro quadro parado.

4. 4

   Use os quatro atributos

   autoplay, muted, loop, playsinline, com poster e aria-hidden.

5. 5

   Respeite as preferências de movimento

   Mostre o pôster para movimento reduzido e acrescente um botão de pausa.

6. 6

   Teste em um celular de verdade

   Confira o tempo de carregamento nos dados móveis, no modo de economia de energia e no recorte alto.

Para o design do destaque em si, veja fundos para o destaque de sites. Se o seu fundo em movimento é um Mark do Gradiently, você pode exportá-lo como um vídeo MP4 em loop de até 1080p para usar exatamente assim.