# Video Background: guia completo

> O Video Background acrescenta secções de destaque com vídeo em ecrã inteiro na página inicial e nas páginas de categoria do PrestaShop 8 e 9. O vídeo é alojado no…

- Página: <https://www.datafirefly.com/pt/documentation/dfvideobackground/>
- Idioma: pt
- Atualizado em: 2026-09-09
- Outros idiomas: [fr](https://www.datafirefly.com/documentation/dfvideobackground/index.md), [en](https://www.datafirefly.com/en/documentation/dfvideobackground/index.md), [es](https://www.datafirefly.com/es/documentation/dfvideobackground/index.md), [de](https://www.datafirefly.com/de/documentation/dfvideobackground/index.md), [it](https://www.datafirefly.com/it/documentation/dfvideobackground/index.md), [pl](https://www.datafirefly.com/pl/documentation/dfvideobackground/index.md), [nl](https://www.datafirefly.com/nl/documentation/dfvideobackground/index.md)
- Índice: <https://www.datafirefly.com/pt/documentation/llms.txt>

O Video Background acrescenta secções de destaque com vídeo em ecrã inteiro na página inicial e nas páginas de categoria do PrestaShop 8 e 9. O vídeo é alojado no seu próprio servidor e reproduzido pela etiqueta de vídeo HTML5 nativa: sem chamadas ao YouTube ou ao Vimeo, sem cookies de terceiros e sem nada a acrescentar à sua faixa de consentimento. O módulo integra um carregamento diferido por IntersectionObserver, uma imagem de recurso em telemóvel e uma sobreposição multi-idioma (título, subtítulo, botão).

## Instalação

1. No back-office do PrestaShop, abra **Módulos > Gestor de módulos** e clique em **Carregar um módulo**.
2. Selecione o ficheiro `dfvideobackground.zip` e confirme.
3. Clique em **Configurar**: chega diretamente à lista das secções de vídeo.

O módulo instala-se sem qualquer override do núcleo ou do tema. Regista os hooks `displayHome`, `displayContentWrapperTop` e `displayHeader`, cria duas tabelas SQL e uma pasta `uploads/` protegida contra a execução de PHP.

## Criar a sua primeira secção de vídeo

1. Clique em **Adicionar uma secção de vídeo**.
2. Preencha um **nome interno** (nunca apresentado no front-office).
3. Escolha a **localização**: Página inicial ou Página de categoria. Numa categoria, selecione-a na árvore.
4. Carregue o seu **vídeo MP4** (obrigatório) e, se tiver, a variante **WebM** (servida prioritariamente, por ser mais leve).
5. Acrescente uma **imagem de póster** (apresentada antes do carregamento do vídeo) e uma **imagem de recurso para telemóvel**. Sem imagem de telemóvel, é usado o póster.
6. Introduza o **título**, o **subtítulo**, a **designação** e a **ligação do botão** em cada idioma da loja.
7. Grave: a secção fica em linha de imediato, se estiver ativa.

Pode criar tantas secções quantas precisar, uma por categoria ou várias na página inicial, e reordená-las arrastando na coluna Posição da lista.

Preencha mesmo o título, o subtítulo e o botão em português: são campos multi-idioma que escreve você mesmo, e um idioma deixado vazio aparece vazio no front-office. Se o texto estiver embutido no próprio vídeo, prepare uma versão portuguesa do ficheiro, porque a imagem em movimento não é traduzível pelo PrestaShop.

## Preparar um vídeo otimizado

A regra de ouro é uma sequência curta (10 a 20 segundos), sem som, sem faixa áudio e com menos de 5 MB. Com o ffmpeg:

```
# MP4 H.264, 1280 px de largura, sem áudio, otimizado para streaming
ffmpeg -i origem.mov -an -vf "scale=1280:-2" -c:v libx264 -crf 28 -preset slow -movflags +faststart hero.mp4

# Variante WebM VP9 (opcional, mais leve)
ffmpeg -i origem.mov -an -vf "scale=1280:-2" -c:v libvpx-vp9 -crf 38 -b:v 0 hero.webm
```

O tamanho máximo de carregamento é de 64 MB por predefinição (configuração `DFVB_MAX_VIDEO_MB`), mas continua limitado pelas diretivas PHP `upload_max_filesize` e `post_max_size` do seu servidor.

## Referência das definições

### Aspeto

- **Altura**: valor e unidade (vh ou px). 60 vh por predefinição.
- **Cor e opacidade da sobreposição**: véu colorido colocado sobre o vídeo, para garantir a legibilidade do texto (preto a 35 % por predefinição).
- **Cor do texto** e **alinhamento do conteúdo** (esquerda, centro, direita).

### Reprodução

- **Reprodução automática**: leitura automática, sempre sem som (exigência dos navegadores).
- **Repetição**: reinicia o vídeo continuamente.
- **Mostrar os controlos**: apresenta os controlos nativos do leitor (inativo por predefinição, para um efeito de «fundo»).

### Desempenho

- **Carregamento diferido**: o vídeo só é descarregado quando a secção se aproxima do viewport (margem de 200 px). Recomendado.
- **Ponto de rutura para telemóvel**: abaixo desta largura (768 px por predefinição), a imagem de recurso substitui o vídeo e o ficheiro de vídeo nunca é descarregado.

## Comportamento no front-office: carregamento diferido, telemóvel, acessibilidade

- Em computador, as origens de vídeo são injetadas quando a secção se aproxima do viewport e a reprodução começa; faz pausa automaticamente quando a secção sai do ecrã (poupança de bateria e de largura de banda).
- Em telemóvel (abaixo do ponto de rutura), só é apresentada a imagem de recurso: zero bytes de vídeo transferidos, com os seus Core Web Vitals em telemóvel preservados.
- Se o visitante tiver ativado `prefers-reduced-motion`, o vídeo com reprodução automática não é descarregado: fica a imagem de póster.
- O script de front-office pesa cerca de 4 KB, em JavaScript nativo, sem jQuery.

A imagem de recurso em telemóvel é vista por uma boa parte do seu tráfego, já que em Portugal a maioria das visitas a lojas em linha vem de telemóvel. Trate-a como um visual de pleno direito, com o mesmo cuidado do vídeo, e não como um simples substituto.

## RGPD

Ao contrário de uma incorporação do YouTube ou do Vimeo, o vídeo é servido a partir do seu próprio domínio: não é depositado qualquer cookie, não é transmitido qualquer dado a terceiros e não é emitido qualquer pedido externo. Não tem, por isso, nada a acrescentar à sua faixa de consentimento nem ao seu registo de atividades de tratamento por causa deste módulo.

É uma diferença que conta em Portugal: uma incorporação do YouTube deposita cookies e envia o IP do visitante para fora, o que exige consentimento prévio nos termos da Lei n.º 41/2004 e a declaração desse subcontratante no seu registo, sob supervisão da CNPD. Ao alojar o vídeo, dispensa as duas coisas.

## Multiloja e multi-idioma

- Cada secção fica associada à loja do contexto em que foi criada; em contexto de loja única, a lista é filtrada automaticamente.
- O título, o subtítulo, a designação do botão, a ligação e o texto alternativo da imagem introduzem-se em cada idioma ativo, diretamente no formulário.

## Resolução de problemas

- **O vídeo não aparece numa categoria**: confirme que o seu tema inclui mesmo o hook `displayContentWrapperTop` no seu layout (presente em todos os temas baseados no Classic) e que a secção está ativa e associada à categoria certa.
- **O vídeo não começa automaticamente**: a reprodução automática exige um vídeo sem som, e o módulo impõe essa definição, mas alguns navegadores bloqueiam a reprodução automática em modo de poupança de energia; nesse caso, fica a imagem de póster.
- **Erro no carregamento**: verifique a extensão (mp4, webm, jpg, png, webp), o limite do PHP `upload_max_filesize` e as permissões da pasta `modules/dfvideobackground/uploads/`.
- **O vídeo aparece em telemóvel**: verifique o valor do ponto de rutura da secção; a imagem de recurso aplica-se apenas abaixo dessa largura.

## Desinstalação

A desinstalação elimina as tabelas SQL do módulo, os ficheiros carregados na pasta uploads e o separador de administração. Exporte previamente os seus vídeos se os quiser conservar.