YouTube Video Showcase - Slider Responsivo, Leitor em Lightbox e Miniaturas Automáticas

Os seus vídeos já estão feitos. Ponha-os na loja.

Demonstrações de produto, unboxings, tutoriais, filmes de marca — o trabalho está feito e os vídeos estão no YouTube. O que costuma faltar é uma forma decente de os mostrar na loja: algo que não obrigue a carregar miniaturas à mão, que não mande o cliente para o YouTube a meio da visita e que não arraste uma biblioteca de slider e uma cópia do jQuery para todas as páginas.

Cole um link. A configuração é essa.

Copie qualquer endereço do YouTube — da barra do navegador ou do botão Partilhar —, dê um título ao vídeo, cole o link e guarde. Assim que o link é reconhecido, o formulário Adicionar um vídeo mostra-lhe a miniatura vinda diretamente do YouTube e um visto verde com o ID do vídeo interpretado, para que veja que o link foi entendido antes de confirmar. Sem carregar imagens e sem chave de API.

Todos os formatos de link são aceites: youtube.com/watch?v=…, a forma curta youtu.be/…, Shorts, links de incorporação, links de direto e até um simples ID de vídeo com 11 caracteres. O que não é aceite é um link de playlist ou de canal, porque nenhum deles identifica um único vídeo — e o formulário avisa-o disso em vez de guardar algo estragado.

O vídeo é reproduzido na sua página, não na do YouTube

Ao clicar numa miniatura, o vídeo abre num lightbox sem distrações por cima da sua loja, fechando-se com um clique ou com a tecla Escape. Usa o leitor no-cookie de privacidade reforçada do YouTube, pelo que um visitante que nunca reproduza um vídeo não é seguido por ele.

Um slider que trata dos ecrãs pequenos sozinho

Escolha quantos vídeos ficam numa linha no computador — de um a oito. Esse número é um máximo, não uma quantidade fixa: abaixo de 992 px o módulo limita-o a quatro, abaixo de 768 px a três e abaixo de 576 px a dois, com deslize tátil nativo. Não há breakpoints para configurar, e não fica com uma fila de oito selos no telemóvel.

As setas de navegação e os pontos são opcionais e ambos desaparecem automaticamente quando todos os vídeos já cabem no ecrã — sem setas mortas ao lado de um slider que não tem nada para deslizar.

Reprodução automática que sabe quando parar

A reprodução automática avança pelos vídeos ao ritmo que definir e faz pausa quando deve: enquanto o rato do visitante está sobre o slider, enquanto um vídeo está efetivamente a ser reproduzido no lightbox e enquanto o separador do navegador está em segundo plano. Um slider que continua a avançar por trás do vídeo que alguém está a ver é pior do que não ter reprodução automática nenhuma.

Uma lista de vídeos que dá mesmo para gerir

A lista Os seus vídeos dá-lhe setas para cima e para baixo para ordenar, um distintivo Visible em que clica para esconder ou mostrar um vídeo, e editar ou eliminar em cada linha. Qualquer vídeo pode ser restringido a um único idioma da loja ou mostrado a toda a gente — útil quando o tutorial em alemão não deve aparecer na loja francesa. Um vídeo cujo idioma foi entretanto removido da loja fica assinalado como Deleted language e é escondido, em vez de desaparecer em silêncio e sem explicação.

Leve ao ponto de não pesar

Um ficheiro CSS pequeno e um ficheiro JavaScript pequeno, carregados apenas quando há algo para mostrar. Sem jQuery, sem slick, sem colorbox, nada obtido de um CDN. Os recursos da loja levam a versão do módulo no cache-busting, pelo que uma atualização chega aos visitantes recorrentes sem pedir a ninguém que force a recarga da página.

Cada slide é um link real para o vídeo, que o JavaScript depois transforma no lightbox — por isso, se o JavaScript falhar ou estiver desativado, as miniaturas continuam a funcionar como links normais em vez de se tornarem imagens mortas.

Ponha-o onde quiser

Por predefinição, o slider fica na página inicial através de displayHome. Mova-o ou copie-o para qualquer outro hook de exibição a partir de Design → Posições, ou coloque-o diretamente num template do tema com {widget name='youtubeslider'}.

O que as versões 2.0.x corrigiram

A versão 1.x carregava jQuery duas vezes a partir de um CDN, a sua página de configuração falhava por completo nas versões modernas do PrestaShop, recarregar a página depois de guardar duplicava vídeos e um URL vazio produzia um slide cinzento estragado. Tudo isso desapareceu por desenho: o módulo deixou de usar jQuery, todas as gravações são validadas e redirecionadas, e um vídeo não pode ser guardado sem um link válido do YouTube.

A linha 2.0.x corrigiu depois três problemas reais de temas: o slider a ocupar toda a largura do navegador em zonas da página inicial de extremo a extremo, como as do Hummingbird (agora limitado à largura de conteúdo do tema e centrado), a barra de deslocamento horizontal provocada pela sua seta de avanço e um transbordo em telemóvel em zonas de hook com CSS Grid, onde o contentor se dimensionava pelo conteúdo por deslocar em vez de o fazer pela área visível. A versão 2.0.2 corrigiu ainda uma atualização que podia desativar o módulo quando um único registo de hook devolvia false.

Compatibilidade

PrestaShop 1.7, 8 e 9, em oito idiomas: alemão, espanhol, francês, inglês, italiano, neerlandês, polaco e turco. Funciona com qualquer tema, sem jQuery e sem bibliotecas externas. A atualização a partir da versão 1.x migra os seus vídeos automaticamente — os IDs são extraídos dos URLs guardados, e qualquer slide antigo guardado sem um URL válido é mantido mas marcado como Hidden, para que o possa corrigir em vez de o perder. A desinstalação remove a tabela e as definições do módulo; os seus vídeos no YouTube ficam, claro, intactos.

Perguntas frequentes

Preciso de uma chave de API do YouTube?

Não. As miniaturas vêm diretamente dos endereços de imagem do próprio YouTube, por isso não há nada para registar nem quota que se esgote.

Que formatos de link funcionam?

Todos os habituais: watch?v=, youtu.be, Shorts, links de incorporação e de direto, ou um simples ID de vídeo. Links de playlist e de canal não funcionam, porque não identificam um único vídeo.

O visitante sai da minha loja para ver o vídeo?

Não. O vídeo abre num lightbox por cima da sua página, com o leitor no-cookie do YouTube, e fecha-se com um clique ou com a tecla Escape.

Como se comporta no telemóvel?

Reduz sozinho os vídeos por linha — limitados a quatro abaixo de 992 px, três abaixo de 768 px e dois abaixo de 576 px — e suporta deslize tátil nativo. A sua definição é o máximo para computador; não há breakpoints para configurar.

Posso mostrar vídeos diferentes em idiomas diferentes?

Sim. Cada vídeo ou fica restringido a um idioma da loja ou é mostrado em todos.

A minha miniatura é um marcador cinzento. Essa é a imagem que o YouTube devolve para um vídeo privado, eliminado ou acabado de carregar. Verifique se o vídeo é público e está acessível.

Um vídeo não é reproduzido no lightbox. O respetivo proprietário desativou a incorporação no YouTube. É uma restrição do lado do YouTube, e o lightbox mostra a mensagem do próprio YouTube quando isso acontece.

Posso tirar o slider da página inicial?

Sim, a partir de Design → Posições para qualquer hook de exibição, ou com {widget name='youtubeslider'} em qualquer ponto do seu tema.