# Site com vídeo de fundo: peso, reprodução automática e acesso [Canonical HTML page](https://gradiently.design/pt-pt/guide/video-background-website) Um destaque em movimento pode dar vida a um site, ou torná-lo lento, distrativo e difícil de ler. A diferença está numa pequena lista de escolhas técnicas e de design. ## The short version - Um vídeo de fundo num site é um vídeo sem som e em ciclo que corre por trás de uma secção, normalmente a de destaque, enquanto o texto e os botões ficam por cima. - Os navegadores costumam permitir a reprodução automática de um vídeo só quando está sem som, e os iPhones precisam também do atributo playsinline para o manter na página. - Uma imagem de capa deve aparecer antes de o vídeo carregar e sempre que não possa ser reproduzido, por isso tem de parecer um design acabado por si só. - Os visitantes que pedem menos movimento devem ver a imagem de capa parada, e o conteúdo em movimento que dure mais de cinco segundos precisa de uma forma de o pausar. - Ciclos curtos, lentos e sem som comprimem-se muito melhor do que imagens agitadas, o que mantém a página rápida. 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. | Opção | Peso da página | Melhor para | | --- | --- | --- | | Imagem parada | Leve | Fotografia, e páginas onde a velocidade é o mais importante | | 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 não ser que seja curto e lento | Imagens reais, ou movimento que tem de parecer exatamente igual em todo o lado | O vídeo é a única opção para imagens filmadas. Para movimento abstrato, o [CSS](https://gradiently.design/pt-pt/guide/css-animated-gradient) e os [shaders](https://gradiently.design/pt-pt/guide/shader-gradients) são muitas vezes mais leves. ## 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ã. ```html

Colour that moves with you

``` O navegador usa a primeira fonte que consegue reproduzir: WebM onde é suportado, MP4 em todo o lado. ```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 */ } ``` `object-fit: cover` recorta o vídeo para qualquer forma de ecrã. Mantém a parte importante das imagens 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. 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. ```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 ``` Definições de partida. `-an` remove o áudio; um número CRF mais alto significa um ficheiro mais pequeno e mais suave. Sobe-o até veres artefactos e depois recua um passo. - Destaque do site 1920 × 1080: 1920 × 1080 - Recorte no telemóvel: 1080 × 1920 Cria o original em 1920 × 1080. Num telemóvel, `object-fit: cover` mostra só uma fatia alta do meio, por isso compõe a pensar nisso. > **Faz o ciclo encaixar** Um salto visível a cada dez segundos distrai mais do que não ter vídeo. Vê [como fazer um ciclo contínuo](https://gradiently.design/pt-pt/guide/seamless-loop-video). ## 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](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html) 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. ```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' } }) ``` Pausa para quem pede menos movimento, acompanha a definição se mudar e dá a toda a gente um botão de pausa. [Menos movimento](https://gradiently.design/pt-pt/guide/reduced-motion) 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](https://gradiently.design/pt-pt/guide/text-over-image) tem sete técnicas que se aplicam igualmente ao vídeo. Um destaque largo de um site com um título sobre uma textura agitada em movimento que compete com as palavras Material agitado a passar diretamente pelo título… O mesmo destaque do site em que a textura acalma por trás do título, que se lê com clareza …e o mesmo destaque com a parte calma do campo por trás das palavras. ## Lista de verificação do vídeo de fundo 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. **Mantém-no curto, lento e sem som** 8 a 15 segundos, sem faixa de áudio, um ciclo que encaixa. 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. **Usa os quatro atributos** `autoplay`, `muted`, `loop`, `playsinline`, com `poster` e `aria-hidden`. 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. **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](https://gradiently.design/pt-pt/guide/website-hero-background). 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. ## FAQ ### Porque é que o meu vídeo de fundo não se reproduz automaticamente? Os navegadores costumam bloquear a reprodução automática com som, por isso junta o atributo muted. No iPhone junta também playsinline, e lembra-te de que os modos de poupança de energia podem na mesma impedir a reprodução automática, por isso uma boa imagem de capa importa. ### Um vídeo de fundo prejudica a velocidade do site? Pode prejudicar, porque o vídeo é normalmente o maior ficheiro da página. Ciclos curtos, lentos e sem som, no tamanho certo, em WebM e MP4, mantêm o custo baixo. ### Que tamanho deve ter um vídeo de fundo para um site? Cria o original em 1920 × 1080 e não o sirvas maior do que aparece. Imagens suaves e abstratas ficam muitas vezes bem numa resolução mais baixa. ### Os vídeos de fundo têm de ser acessíveis? Sim. Esconde o vídeo decorativo dos leitores de ecrã, mostra uma imagem parada a quem pede menos movimento e disponibiliza um controlo de pausa para movimento que dure mais de cinco segundos. ### Qual é uma alternativa mais leve a um vídeo de fundo? Um gradiente CSS animado ou um shader WebGL podem criar movimento abstrato com um download muito mais pequeno, embora os shaders usem o chip gráfico enquanto correm.