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

Num site com vídeo de fundo, um vídeo sem som e em ciclo corre por trás de uma secção, quase sempre a de destaque, enquanto o título e os botões ficam por cima. Bem feito, é leve, discreto e opcional: reproduz-se sozinho em silêncio, mostra uma imagem parada acabada antes de carregar, para para quem prefere menos movimento e nunca torna as palavras mais difíceis de ler. Mal feito, é a coisa mais pesada e mais distrativa da página.

Quando vale a pena um vídeo de fundo

Um vídeo de fundo merece o lugar quando o movimento é a mensagem: água para uma escola de natação, vapor para uma torrefação de café, um material a derivar devagar para uma marca cujo visual é a sua identidade. Se o movimento é só decoração, uma opção mais leve costuma ficar igualmente bem. Compara as escolhas antes de te comprometeres.

O HTML de um vídeo de fundo

Quatro atributos fazem o trabalho essencial. muted deixa o navegador reproduzi-lo automaticamente, já que os navegadores costumam bloquear a reprodução automática com som. playsinline impede o iPhone de o abrir em ecrã inteiro. loop repete-o, e poster mostra uma imagem parada enquanto carrega. Como é decorativo, esconde-o dos leitores de ecrã.

<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. Lembra-te de que a reprodução automática é um pedido e não uma garantia: alguns telemóveis em modo de poupança de energia não a fazem. É por isso que a imagem de capa tem de parecer um design acabado por si só.

Manter o ficheiro de vídeo leve

O vídeo é normalmente o maior ficheiro de qualquer página que o tenha. Imagens suaves e lentas comprimem-se muito melhor do que imagens nítidas e agitadas, por isso a escolha de design é também uma escolha de desempenho. Mantém o ciclo curto, à volta de 8 a 15 segundos, remove por completo a faixa de áudio e não sirvas um tamanho maior do que aquele em que o destaque alguma vez aparece. Define um limite de tamanho antes de exportar e verifica 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 do site 1920 × 1080

1920 × 1080

Recorte no telemóvel

1080 × 1920

Menos movimento e um botão de pausa

Alguns visitantes configuram o dispositivo para reduzir o movimento porque o movimento lhes causa tonturas ou mal-estar. Respeita isso mostrando a imagem de capa em vez do vídeo. À parte, o critério Pause, Stop, Hide da WCAG pede que o 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 isso.

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'
  }
})

Menos movimento explica a definição e o que mais convém reduzir.

Texto legível sobre um vídeo de fundo

O texto sobre vídeo tem de se ler contra todos os fotogramas, não só contra a imagem de capa. A solução habitual é uma camada escura sobre o vídeo inteiro, que funciona mas o achata. Há opções melhores: escolhe imagens calmas com uma zona tranquila onde ficam as palavras, mantém o movimento mais claro longe do título e usa um peso grande e forte. O nosso guia de texto sobre imagem tem sete técnicas que se aplicam igualmente ao vídeo.

Lista de verificação do vídeo de fundo

1. 1

   Decide se tem mesmo de ser vídeo

   Imagens filmadas, ou movimento que tem de parecer idêntico em todo o lado. Caso contrário, pondera CSS ou um shader.

2. 2

   Mantém-no curto, lento e sem som

   8 a 15 segundos, sem faixa de áudio, um ciclo que encaixa.

3. 3

   Exporta dois formatos e uma imagem de capa

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

4. 4

   Usa os quatro atributos

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

5. 5

   Respeita as preferências de movimento

   Mostra a imagem de capa a quem pede menos movimento e junta um botão de pausa.

6. 6

   Testa num telemóvel a sério

   Verifica o tempo de carregamento com dados móveis, o modo de poupança de energia e o recorte alto.

Para o design do destaque em si, vê fundos para a secção de destaque. Se o teu fundo em movimento é um Mark da Gradiently, podes exportá-lo como vídeo MP4 em ciclo até 1080p para o usar exatamente desta forma.