PrestaShop Design & Navegação

Video Background: Banner de Vídeo na Página Inicial e nas Categorias

Secções hero de vídeo alojadas no próprio servidor, zero cookies de terceiros

Transforme a sua página inicial e as suas páginas de categoria com banners de vídeo em ecrã inteiro: vídeo alojado no próprio servidor, sem YouTube nem Vimeo, com lazy loading inteligente e imagem de recurso automática no telemóvel.

At a glance
  • Vídeo hero em ecrã inteiro na página inicial e nas páginas de categoria
  • Vídeo alojado no próprio servidor em MP4 e WebM: sem chamadas ao YouTube ou ao Vimeo e sem cookies de terceiros
  • Lazy loading: o vídeo só é descarregado à entrada no viewport
  • Imagem de recurso no telemóvel: nenhum byte de vídeo descarregado abaixo do ponto de rutura
  • Sobreposição com título, subtítulo e botão de ação multilingues
PrestaShop 8 PrestaShop 9 Multiloja RGPD
  • Reembolso em 30 dias
  • 12 meses de atualizações
  • Suporte em 24h
www.datafirefly.com/pt/
Banner de vídeo em fundo na página inicial do PrestaShop, com reprodução sem cookies
v1.0.0 · atualizado 2026-07-16
O que faz

A versão curta.

01

Zero cookies, zero rastreadores

O vídeo é servido diretamente a partir do seu servidor numa etiqueta video HTML5 nativa. Sem iframes do YouTube ou do Vimeo, sem cookies de terceiros e sem uma única linha a acrescentar ao seu banner de consentimento: o argumento RGPD passa a ser um argumento de venda.

02

Lazy loading inteligente

O ficheiro de vídeo só é descarregado quando a secção se aproxima do viewport (IntersectionObserver, com margem de 200 px). A reprodução entra automaticamente em pausa fora do ecrã, para poupar bateria e largura de banda.

03

Telemóvel: imagem, não vídeo

Abaixo do ponto de rutura configurável (768 px por predefinição), o módulo mostra uma imagem de recurso e nunca descarrega o vídeo. Os seus Core Web Vitals no telemóvel mantêm-se intactos.

04

Secções ilimitadas e multilingues

Crie tantas secções quantas forem precisas: uma por categoria e uma para a página inicial. Título, subtítulo, botão, ligação e texto alternativo são traduzíveis em todos os idiomas da loja.

A versão longa

Tudo o que quer saber antes de instalar.

Uma análise detalhada de como o Video Background: Banner de Vídeo na Página Inicial e nas Categorias funciona, porque o construímos assim e o raciocínio por trás das funcionalidades acima.

§ 01

Um banner de vídeo que vende, sem sacrificar o RGPD

O vídeo em fundo é uma das alavancas visuais mais poderosas para uma página inicial de comércio eletrónico: põe os seus produtos em cena, instala um universo de marca e aumenta o tempo passado na página. O problema das soluções habituais: um embed do YouTube ou do Vimeo coloca cookies de terceiros, torna a página mais lenta com mais de um megabyte de JavaScript e obriga-o a condicionar a apresentação ao consentimento. O Video Background faz o contrário: o vídeo está alojado no seu próprio servidor e é reproduzido pela etiqueta video HTML5 nativa. Resultado: zero cookies, zero pedidos externos e nada para declarar no seu banner de consentimento.

§ 02

Pensado para o desempenho: lazy loading e recurso no telemóvel

Um vídeo mal integrado pode arruinar os seus Core Web Vitals. O módulo só descarrega o ficheiro quando a secção se aproxima do viewport, põe a reprodução em pausa quando sai do ecrã e nunca envia o vídeo aos visitantes móveis: abaixo do ponto de rutura que definir, entra uma imagem de recurso otimizada, com o seu próprio texto alternativo. Os visitantes que ativaram a redução de animações ficam com a imagem poster, sem descarregamentos inúteis.

§ 03

Secções à medida para a página inicial e para cada categoria

Crie uma secção hero para a página inicial, outra para a sua categoria principal e uma terceira para os saldos: cada secção tem o seu vídeo MP4 e a sua variante WebM opcional, o seu poster, a sua imagem móvel, a sua altura em vh ou em pixels, a sua sobreposição colorida com opacidade ajustável, e o seu bloco de conteúdo com título, subtítulo e botão de ação, traduzível em todos os idiomas da loja. A ordem de apresentação gere-se por arrastar e largar.

§ 04

Instalação em cinco minutos, sem definições técnicas

Instale o zip, crie a sua primeira secção e carregue o seu vídeo: está no ar. O módulo assenta nos hooks padrão do PrestaShop, não altera qualquer ficheiro do tema e funciona com qualquer tema baseado no Classic. Os carregamentos são verificados no servidor (tipo MIME, extensão e tamanho máximo configurável) e os ficheiros são limpos automaticamente quando uma secção é substituída ou eliminada.