Aterramos num site e a primeira coisa que vemos não é uma imagem estática, mas um vídeo vivo e pulsante a ocupar o ecrã inteiro. Parece caro. Parece profissional. E, mais importante, funciona em qualquer dispositivo, de um telemóvel a um monitor ultrawide, sem uma única barra preta.

Pode pensar que algo assim exige JavaScript, medições da janela de visualização e cálculos complexos. Também pensei o mesmo quando enfrentei esta tarefa pela primeira vez. Experimentei calc(), unidades de viewport, até escrevi um script de redimensionamento. Funcionava no Firefox, partia no Chrome e ficava completamente mudo no Safari.

Depois descobri que o CSS já tem, há vários anos, uma propriedade que faz exatamente o que precisamos, sem uma única linha de JS. E hoje vou mostrar-lhe como construir um fundo de vídeo totalmente responsivo que se comporta como background-size: cover, mas para vídeo real.

💡 Resumo rápido:

• Posicione o elemento de vídeo com fixed a cobrir toda a janela de visualização
• Aplique object-fit: cover; o vídeo ajusta-se automaticamente, cortando o excesso e preservando o centro
• Para navegadores mais antigos, mantenha um fallback com media queries e um «contentor sobredimensionado»
• Envolva tudo num contentor, útil para sobreposições, botões e texto por cima do vídeo
• Adapte para mobile: fonte diferente, playsinline e uma imagem de fallback

Abordagem básica: posicionamento fixo

Qualquer fundo de vídeo começa por fazer o <video> ocupar toda a área de visualização. Isto consegue-se com position: fixed e deslocamentos a zero:

1
#myvid {
2
  position: fixed;
3
  top: 0;
4
  right: 0;
5
  bottom: 0;
6
  left: 0;
7
}

O elemento estica-se exatamente à largura e altura da janela de visualização. O problema surge de imediato: o vídeo é quase sempre filmado em proporção 16:9, mas o ecrã do utilizador pode ser quadrado, ultrawide ou em modo retrato. O resultado são aquelas barras pretas que estragam todo o efeito.

Se já trabalhou com imagens de fundo em CSS, sabe que background-size tem um valor cover. Ele força a imagem a preencher o contentor por completo, cortando o excesso e mantendo as proporções. Precisamos exatamente do mesmo comportamento para vídeo. E ele existe.

Solução moderna: object-fit: cover

A propriedade object-fit foi criada precisamente para isto. Ela determina como um elemento substituído (imagem ou vídeo) se ajusta ao seu contentor, e o valor cover funciona exatamente como background-size: cover:

1
#myvid {
2
  position: fixed;
3
  top: 0;
4
  right: 0;
5
  bottom: 0;
6
  left: 0;
7
  width: 100%;
8
  height: 100%;
9
  object-fit: cover;
10
}

O vídeo é redimensionado para preencher completamente o contentor. Se as proporções não coincidirem, o navegador corta o excesso de cima e de baixo (ou da esquerda e da direita) e centra automaticamente o resultado. Sem barras pretas.

Em 2026, object-fit é suportado por 96,39% dos navegadores a nível global (dados do Can I Use). Chrome a partir da versão 32, Firefox a partir da 36, Safari a partir da 10, Edge a partir da 79. O Internet Explorer 11 não o suporta, mas a sua quota de mercado está a aproximar-se de zero e o seu período de suporte terminou.

Para a grande maioria dos projetos, estas três linhas de CSS são suficientes. O fundo de vídeo está pronto.

Problemas de escala: o que acontece «nos bastidores»

Mesmo que use object-fit, é útil compreender a mecânica. Dois cenários são possíveis:

Primeira situação: a janela de visualização é mais larga do que o vídeo (proporção do ecrã superior a 16:9). O vídeo estica em largura para preencher toda a área disponível, mas a sua altura torna-se maior do que a altura do ecrã, pelo que o conteúdo é cortado em cima e em baixo. A área de corte é centrada automaticamente.

Segunda situação: a janela de visualização é mais estreita (proporção inferior a 16:9, por exemplo, orientação retrato num tablet). O vídeo estica em altura para preencher toda a área disponível, a largura excede a janela de visualização, o corte ocorre à esquerda e à direita e o centro é preservado.

object-fit: cover trata de ambos os cenários sozinho. Mas se, por algum motivo, estiver a trabalhar sem ele, a próxima secção é para si.

Truque clássico com um «contentor sobredimensionado»

Antes de object-fit se tornar padrão, os developers usavam uma técnica engenhosa. A ideia: tornar o contentor deliberadamente maior do que o vídeo e a janela de visualização, e o navegador centrará o conteúdo automaticamente.

Na prática, tem este aspeto:

1
#myvid {
2
  position: fixed;
3
  top: 0;
4
  left: 0;
5
  width: 100%;
6
  height: 100%;
7
}
8
 
9
@media (min-aspect-ratio: 16/9) {
10
  #myvid {
11
    height: 300%;
12
    top: -100%;
13
  }
14
}
15
 
16
@media (max-aspect-ratio: 16/9) {
17
  #myvid {
18
    width: 300%;
19
    left: -100%;
20
  }
21
}

As media queries determinam qual o eixo com overflow e definem um tamanho que é um múltiplo da janela de visualização, com um deslocamento negativo para centrar. O vídeo acaba muitas vezes maior do que a área de visualização, e o navegador corta-o e centra-o usando o mecanismo padrão para elementos substituídos.

Hoje, este código é mais uma rede de segurança para projetos legados. Mas se estiver a manter um site onde object-fit não está disponível por algum motivo, o truque funciona de forma fiável.

Código de produção: juntar tudo

Num projeto real, um fundo de vídeo raramente existe sozinho. Por cima dele, há um título, um botão, um formulário, uma sobreposição para legibilidade do texto. É por isso que o vídeo é envolvido num contentor que mantém as dimensões da janela de visualização:

1
#SDStudio_VIDEO_BACKGROUND {
2
  position: fixed;
3
  top: 0;
4
  right: 0;
5
  bottom: 0;
6
  left: 0;
7
  overflow: hidden;
8
}
9
 
10
#SDStudio_VIDEO_BACKGROUND > video {
11
  position: absolute;
12
  top: 0;
13
  left: 0;
14
  width: 100%;
15
  height: 100%;
16
}
17
 
18
/* Fallback: if object-fit is not supported */
19
@media (min-aspect-ratio: 16/9) {
20
  #SDStudio_VIDEO_BACKGROUND > video {
21
    height: 300%;
22
    top: -100%;
23
  }
24
}
25
 
26
@media (max-aspect-ratio: 16/9) {
27
  #SDStudio_VIDEO_BACKGROUND > video {
28
    width: 300%;
29
    left: -100%;
30
  }
31
}
32
 
33
/* Override if object-fit is available */
34
@supports (object-fit: cover) {
35
  #SDStudio_VIDEO_BACKGROUND > video {
36
    top: 0;
37
    left: 0;
38
    width: 100%;
39
    height: 100%;
40
    object-fit: cover;
41
  }
42
}

A diretiva @supports verifica o suporte para object-fit e substitui as regras de fallback. Um navegador moderno recebe a solução limpa de três linhas. Um desatualizado funciona através de media queries e do contentor sobredimensionado.

A marcação é mínima:

1
<div id="SDStudio_VIDEO_BACKGROUND">
2
  <video autoplay muted loop playsinline>
3
    <source type="video/mp4" src="myvid.mp4"
4
            media="(orientation: landscape)">
5
    <source type="video/webm" src="myvid.webm"
6
            media="(orientation: landscape)">
7
    <source type="video/mp4" src="myvid_square.mp4"
8
            media="(orientation: portrait)">
9
    <source type="video/webm" src="myvid_square.webm"
10
            media="(orientation: portrait)">
11
  </video>
12
</div>

Alguns detalhes fáceis de ignorar. muted é obrigatório: os navegadores bloqueiam a reprodução automática com som. playsinline impede o iOS de expandir o vídeo para ecrã inteiro. Nem é preciso lembrar do loop; um fundo de vídeo sem repetição parece um erro. Outro ponto: forneça uma fonte quadrada para orientação retrato via media="(orientation: portrait)". Um clip 16:9 padrão num ecrã vertical será cortado quase por completo e transformar-se-á numa cintilação sem sentido.

⁉️🤔 Perguntas frequentes

É obrigatório usar especificamente <video>, ou posso definir um vídeo do YouTube como fundo?

Pode usar um iframe do YouTube como fundo, mas com ressalvas. Perde o controlo sobre o buffering, não pode remover elementos da interface e os navegadores móveis bloqueiam frequentemente a reprodução automática de iframes. Para fundos, um <video> auto-hospedado é sempre preferível. Se incorporar o YouTube, adicione os parâmetros ?autoplay=1&mute=1&controls=0&loop=1&playlist=VIDEO_ID.

Que formato de vídeo devo escolher para máxima compatibilidade?

A combinação de MP4 (H.264) + WebM (VP8/VP9) cobre todos os navegadores modernos. MP4 é o formato principal, WebM é para Chrome e Firefox (tamanho mais pequeno com a mesma qualidade). Resolução para fundos: Full HD é suficiente. Resoluções mais altas proporcionam ganhos de qualidade impercetíveis num fundo, enquanto o tamanho do ficheiro cresce quadraticamente. Mantenha os vídeos dentro de alguns megabytes para um carregamento rápido.

O que devo mostrar aos utilizadores enquanto o vídeo carrega?

Defina poster no <video>, seja um primeiro frame estático ou uma imagem especialmente preparada. Fallback CSS: background-image no contentor, que o object-fit não cobrirá (fica numa camada inferior). Para utilizadores móveis com ligações lentas, é melhor nem carregar o fundo de vídeo. Use a media query prefers-reduced-data e substitua por uma imagem estática.

Como torno o texto sobre o vídeo legível?

Adicione uma sobreposição semitransparente entre o vídeo e o conteúdo: background: rgba(0, 0, 0, 0.4) num pseudo-elemento ::after do contentor com position: absolute; inset: 0; z-index: 1. O conteúdo em si recebe z-index: 2; position: relative. Escolha o coeficiente de escurecimento com base no vídeo específico: imagens mais claras precisam de mais, imagens mais escuras precisam de menos.

Isto funciona em iOS e Android?

Sim, com ressalvas. O iOS exige playsinline (caso contrário, o vídeo entra num leitor de ecrã inteiro). Em versões do iOS Safari anteriores à 10, object-fit não é suportado, pelo que o fallback do código de produção acima será ativado. O Android Chrome funciona corretamente. Em ambas as plataformas, o vídeo só é iniciado após a primeira interação do utilizador se muted não estiver definido, pelo que muted é estritamente obrigatório.

O que usar no seu projeto: o veredito curto

Se está a construir um site em 2026, use object-fit: cover. Três linhas de CSS, sem JavaScript, responsividade total de raiz. O suporte dos navegadores é quase universal e a cobertura só aumenta a cada mês.

Se tem um projeto legado com suporte obrigatório para Edge antigo (antes da versão 79) ou Firefox (antes da versão 36), o código de produção da secção acima dá-lhe os dois mundos: @supports ativa a solução moderna, enquanto as media queries cobrem o resto.

E lembre-se: um fundo de vídeo é a cereja no topo do bolo. Se o clip pesar 20 megabytes e demorar oito segundos a carregar, o utilizador vai embora antes de ver o seu belo título. Comprima, teste a velocidades de rede móvel e forneça sempre um fallback estático.

A um grande fundo.