# Site com vídeo de fundo: peso, reprodução automática e acessibilidade [Canonical HTML page](https://gradiently.design/pt-br/guide/video-background-website) Um destaque em movimento pode deixar um site vivo, ou lento, distrativo e difícil de ler. A diferença está em uma lista curta de escolhas técnicas e de design. ## The short version - Um vídeo de fundo em um site é um vídeo mudo e em loop que roda atrás de uma seção, geralmente o destaque principal, enquanto texto e botões ficam por cima. - Os navegadores em geral só deixam um vídeo tocar sozinho quando ele está mudo, e os iPhones também precisam do atributo playsinline para mantê-lo dentro da página. - Uma imagem de pôster deve aparecer antes de o vídeo carregar e sempre que ele não puder tocar, então ela precisa parecer um design acabado por si só. - Visitantes que pedem movimento reduzido devem ver o pôster parado, e conteúdo em movimento que dura mais de cinco segundos precisa de um jeito de ser pausado. - Loops curtos, lentos e silenciosos comprimem muito melhor que imagens agitadas, o que mantém a página rápida. 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. | Opção | Peso na página | Melhor para | | --- | --- | --- | | Imagem parada | Leve | Fotografia e páginas em que a velocidade importa mais | | Gradiente CSS animado | Quase nada | Derivas simples e mudanças de cor | | Shader WebGL | Download leve, usa a GPU | Texturas vivas, grão e fluxo | | Vídeo | Pesado, a menos que curto e lento | Filmagem real, ou movimento que precisa ficar idêntico em todo lugar | O vídeo é a única opção para filmagem. Para movimento abstrato, o [CSS](https://gradiently.design/pt-br/guide/css-animated-gradient) e os [shaders](https://gradiently.design/pt-br/guide/shader-gradients) costumam ser mais leves. ## 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. ```html

Colour that moves with you

``` O navegador usa a primeira fonte que conseguir reproduzir: WebM onde houver suporte, MP4 em todos os outros. ```css .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 `object-fit: cover` recorta o vídeo para qualquer formato de tela. Mantenha a parte importante da filmagem perto do centro. O guia da MDN sobre o [elemento video](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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. ```bash # 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 ``` Configurações iniciais. `-an` remove o áudio; um número de CRF mais alto significa um arquivo menor e mais suave. Aumente até ver artefatos e depois volte um passo. - Destaque de site 1920 × 1080: 1920 × 1080 - Recorte no celular: 1080 × 1920 Crie o original em 1920 × 1080. No celular, o `object-fit: cover` mostra só uma fatia alta do meio, então componha pensando nisso. > **Faça o loop se emendar** Um salto visível a cada dez segundos distrai mais do que nenhum vídeo. Veja [como fazer um loop contínuo](https://gradiently.design/pt-br/guide/seamless-loop-video). ## 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](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html) 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. ```js 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' } }) ``` Pause para movimento reduzido, acompanhe a configuração se ela mudar e dê a todos um botão de pausa. [Movimento reduzido](https://gradiently.design/pt-br/guide/reduced-motion) 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](https://gradiently.design/pt-br/guide/text-over-image) traz sete técnicas que valem igualmente para vídeo. Um destaque de site largo com um título sobre uma textura em movimento carregada que compete com as palavras Material carregado passando direto pelo título… O mesmo destaque de site em que a textura se acalma atrás do título e ele se lê com clareza …e o mesmo destaque com a parte calma do campo atrás das palavras. ## Checklist do vídeo de fundo 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. **Curto, lento e silencioso** 8 a 15 segundos, sem faixa de áudio, um loop que se emenda. 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. **Use os quatro atributos** `autoplay`, `muted`, `loop`, `playsinline`, com `poster` e `aria-hidden`. 5. **Respeite as preferências de movimento** Mostre o pôster para movimento reduzido e acrescente um botão de pausa. 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](https://gradiently.design/pt-br/guide/website-hero-background). 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. ## FAQ ### Por que o meu vídeo de fundo não toca sozinho? Os navegadores em geral bloqueiam a reprodução automática com som, então acrescente o atributo muted. No iPhone, acrescente também playsinline, e lembre que os modos de economia de energia ainda podem impedir a reprodução automática, por isso uma boa imagem de pôster importa. ### Vídeo de fundo deixa o site lento? Pode deixar, porque o vídeo costuma ser o maior arquivo da página. Loops curtos, lentos e silenciosos, no tamanho certo, em WebM e MP4, mantêm o custo baixo. ### Qual deve ser o tamanho de um vídeo de fundo para site? Crie o original em 1920 × 1080 e não sirva maior do que ele aparece. Filmagens suaves e abstratas muitas vezes ficam bem em resolução mais baixa. ### Vídeos de fundo precisam ser acessíveis? Sim. Esconda o vídeo decorativo dos leitores de tela, mostre uma imagem parada para quem pede movimento reduzido e ofereça um controle de pausa para movimento que dura mais de cinco segundos. ### Qual é uma alternativa mais leve ao vídeo de fundo? Um gradiente CSS animado ou um shader WebGL podem criar movimento abstrato com um download muito menor, embora os shaders usem o chip gráfico enquanto rodam.