Como colocar um vídeo de fundo no seu site: em loop, sem som e rápido

• Um vídeo só pode começar sozinho se estiver sem som: Chrome, Safari e Firefox bloqueiam a reprodução automática com som.
• No iPhone você precisa do atributo playsinline para que ele não abra em tela cheia.
• Se o usuário estiver com economia de dados ou de bateria ativada, o navegador pode não reproduzi-lo sozinho: coloque sempre uma imagem de reserva (poster).

Para um fundo puramente decorativo, de poucos segundos e sem controles, o mais leve é um arquivo pequeno servido pelo seu site. Comprima bastante: um clipe de 5–10 segundos deve pesar menos de 2–3 MB.

<video autoplay muted loop playsinline preload="metadata" poster="background.jpg" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover">
  <source src="background.webm" type="video/webm">
  <source src="background.mp4" type="video/mp4">
</video>

Se é um vídeo que as pessoas vão assistir (uma apresentação, um trailer ou uma demonstração), hospede no Dembed e incorpore com o iframe. Ele não pesa na sua hospedagem, a qualidade se adapta à conexão e o visitante pode ativar o som ou ir para a tela cheia.

Adicione ?autoplay=1 ao final do endereço do embed para que ele comece sozinho, sem som. Em Painel → Player você pode ativar a repetição e esconder o título para um visual mais limpo.

<iframe src="https://dembed.cc/embed/v_SEU_ID?autoplay=1" title="Apresentação" style="width:100%;aspect-ratio:16/9;border:0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen loading="lazy"></iframe>

• Não use um vídeo pesado como fundo do topo no celular: mostre a imagem e reproduza o vídeo só em telas grandes.
• Use loading="lazy" nos iframes abaixo da primeira tela.
• Reserve o espaço com aspect-ratio para que a página não pule enquanto carrega (melhores Core Web Vitals).
• Ofereça uma forma de pausar: é melhor para a acessibilidade e para quem ativou a redução de movimento.