Video de fundo nao reproduz no mobile – ZenBlocks buttonBasic
Conclusao
No mobile, a causa principal costuma ser **restricao de autoplay do navegador**. Definir imagem de fallback e essencial para manter a exibicao.
—
Causas
1. Restricoes de autoplay no iOS Safari.
2. Modo economia de dados no Android.
3. Arquivo de video muito pesado.
4. Codec nao suportado.—
Procedimento
### Etapa 1: definir imagem fallback
1. Abra as configuracoes de fundo.
2. Defina uma imagem estatica alem do video.### Etapa 2: otimizar o video
1. Tamanho maximo recomendado: **5 MB** (ideal <= 2 MB).
2. Resolucao recomendada para mobile: **ate 720p**.
3. Formato recomendado: **MP4 (H.264)**.
4. Remova trilha de audio.### Etapa 3: entender limites do navegador
| Ambiente | Restricao principal |
|—|—|
| iOS Safari | autoplay exige `muted` + `playsinline` |
| iOS modo economia | autoplay pode ser bloqueado |
| Android data saver | carregamento automatico pode ser limitado |
| Navegadores antigos | suporte parcial de codec |### Etapa 4: separar por dispositivo
1. Desktop: usar video.
2. Tablet/smartphone: usar imagem estatica quando necessario.
3. Separar por configuracoes responsive.—
Observacoes
– Video de fundo pode impactar LCP/Core Web Vitals.
– Overlay + fallback ajudam a manter consistencia visual.—
Configuracoes relacionadas
– [Background Settings](../background/)
– [Configuracoes de exibicao](../display/)