Vídeos de categoría

Asigna un vídeo a cualquier categoría y muéstralo como reproductor en línea o como vídeo de fondo a ancho completo en la página de categoría — sin necesidad de programar.

nota

Disponible desde v3.2.0

Descripción general

Vídeos de categoría te permite adjuntar un vídeo por categoría directamente desde el formulario de edición de categoría en tu Back Office. Cuando un cliente visita esa categoría, el vídeo aparece automáticamente según la configuración de visualización que hayas definido en el módulo. Puedes elegir, para cada categoría, si el vídeo se muestra como reproductor en línea (incrustado en una posición concreta dentro de la página) o como vídeo de fondo cinematográfico que reemplaza la imagen de cabecera de la categoría.

Esto resulta útil para vídeos de presentación de marca en categorías de aterrizaje, promociones de temporada o demostraciones de gamas de productos que se reproducen antes de la cuadrícula de productos. Como cada categoría se configura de forma independiente, puedes tener un vídeo hero en una categoría de nivel superior mientras las subcategorías utilizan un reproductor en línea o ningún vídeo en absoluto.

Dos elementos de configuración funcionan conjuntamente: los ajustes globales del módulo (que controlan el comportamiento de todos los vídeos de categoría) y la asignación por categoría (que vincula una URL de vídeo y un modo de visualización concretos a cada categoría).

Configuración

Paso 1 — Activar la función

1. Ve a Módulos > Gestor de módulos, busca Product Video y haz clic en Configurar.
2. Abre la pestaña Vídeos de categoría.
3. Activa Habilitar vídeos de categoría en Sí y haz clic en Guardar.

Sin este interruptor principal activado, no aparecerá ningún vídeo de categoría, aunque los vídeos ya estén asignados a categorías.

Paso 2 — Configurar las opciones de visualización globales

Todos los ajustes siguientes están en Módulos > Gestor de módulos > Product Video > Configurar > Vídeos de categoría.

Ajustes del modo regular (en línea)

Campo	Valores	Predeterminado	Descripción
Habilitar vídeos de categoría	Sí / No	No	Interruptor principal para todos los vídeos de categoría.
Posición del vídeo	Arriba, Después de la descripción, Después de las subcategorías, Después de los productos, Selector personalizado	Arriba	Dónde se inserta el reproductor en línea dentro de la página.
Selector personalizado	Cadena de selector CSS	(vacío)	Solo visible cuando Posición del vídeo está configurado en Selector personalizado. Introduce el selector CSS del elemento tras el que debe aparecer el vídeo.
Anchura del vídeo regular	Número (px)	720	Anchura del reproductor en línea en píxeles.
Altura del vídeo regular	Número (px)	405	Altura del reproductor en línea en píxeles.

Ajustes del modo de fondo (hero)

Estas opciones solo afectan a las categorías en las que el vídeo está configurado en modo Fondo / hero.

Campo	Valores	Predeterminado	Descripción
Altura del fondo	Número (px)	400	Altura de la sección hero a ancho completo en píxeles.
Color de superposición	Selector de color	#000000	Tinte de color aplicado sobre el vídeo. Establece la opacidad en 0 para eliminarlo por completo.
Opacidad de la superposición	0–100 (%)	40	Nivel de opacidad de la capa de color. 0 = completamente invisible; 100 = cubre el vídeo por completo.
Mostrar nombre de categoría	Sí / No	Sí	Superpone el nombre de la categoría como texto sobre el vídeo de fondo.
Mostrar descripción de categoría	Sí / No	No	Superpone el texto de descripción de la categoría sobre el vídeo de fondo. Las descripciones largas se truncan a 200 caracteres.

El Selector de cabecera de categoría en Compatibilidad con el tema controla qué elemento reemplaza el vídeo de fondo. El valor predeterminado (.page-category-heading,.category-cover) funciona con el tema Classic y la mayoría de temas estándar. Si el vídeo de fondo no aparece, este es el ajuste que debes modificar.

Paso 3 — Asignar un vídeo a una categoría

1. Ve a Catálogo > Categorías en el Back Office.
2. Haz clic en Editar en la categoría a la que quieres añadir un vídeo.
3. Desplázate hasta el panel Vídeo al final del formulario de categoría.
4. Introduce la URL del vídeo (YouTube, Vimeo o una URL directa a un archivo de vídeo).
5. Opcionalmente introduce un Título — aparece en el panel de administración solo como identificación y no se muestra a los clientes.
6. Elige el Modo de visualización: En línea (regular) o Fondo / hero.
7. Haz clic en el botón Guardar del panel de vídeo y luego guarda el formulario de categoría.

Repite este proceso para cada categoría que deba tener un vídeo.

Cómo funciona

Cuando un cliente abre una página de categoría, el módulo comprueba si se ha asignado un vídeo a esa categoría. Si existe uno, lo renderiza según el modo de visualización elegido.

Modo en línea (regular)

El vídeo está inicialmente oculto en el código fuente de la página y luego se mueve a la posición correcta mediante un pequeño fragmento de JavaScript que se ejecuta en DOMContentLoaded. La posición la determina el ajuste Posición del vídeo:

• Arriba — insertado después del encabezado de la página, antes de la descripción de la categoría
• Después de la descripción — insertado debajo del bloque de descripción de la categoría
• Después de las subcategorías — insertado debajo de la cuadrícula de subcategorías
• Después de los productos — insertado debajo del listado de productos
• Selector personalizado — insertado después del elemento que coincida con el selector CSS especificado

El reproductor en línea respeta los valores de Anchura del vídeo regular y Altura del vídeo regular configurados globalmente. Los vídeos de YouTube y Vimeo se cargan mediante los cargadores de reproducción existentes del módulo; los archivos de vídeo HTML5 se renderizan con los controles nativos del navegador.

Modo de fondo (hero)

El vídeo de fondo reemplaza el área de imagen de cabecera de tu categoría. El módulo localiza el elemento de cabecera mediante el Selector de cabecera de categoría de los ajustes de Compatibilidad con el tema, y luego renderiza el vídeo detrás de una superposición configurable y etiquetas de texto opcionales.

• Los vídeos de fondo de YouTube se reproducen automáticamente, silenciados, en bucle continuo y sin controles visibles.
• Los vídeos de fondo de Vimeo utilizan el parámetro background=1 de Vimeo para el mismo efecto.
• Los archivos de vídeo HTML5 se reproducen con los atributos autoplay muted loop playsinline.

El vídeo siempre se escala para cubrir el ancho completo del contenedor sin barras negras, independientemente de la relación de aspecto nativa del vídeo. Al redimensionar la ventana, el escalado se recalcula automáticamente.

Si no hay ningún vídeo asignado a una categoría, no se genera ningún elemento — ni contenedor vacío ni espacio reservado.

Ejemplos de uso

Ejemplo: Vídeo de presentación de marca en una colección de nivel superior

Vendes material de exterior y quieres que un vídeo de marca de 60 segundos se reproduzca en la parte superior de tu categoría "Senderismo". Establece el modo de visualización en En línea (regular) con Posición del vídeo en Arriba y unas dimensiones de 1140 × 641 px (que coincidan con la columna de contenido de tu tema). Los clientes llegan a la página y ven el vídeo antes de la cuadrícula de productos, sin salir de la categoría.

Ejemplo: Cabecera de temporada cinematográfica en una categoría de ofertas

Para una categoría "Rebajas de verano", quieres un vídeo en bucle de estilo de vida en la playa en lugar de una imagen de categoría estática. Asigna una URL de YouTube con el Modo de visualización en Fondo / hero, establece la Altura del fondo en 500 px, activa Mostrar nombre de categoría y ajusta la Opacidad de la superposición a 50 para que el texto "Rebajas de verano" sea legible sobre el vídeo. La imagen de cabecera se reemplaza automáticamente por el vídeo.

Ejemplo: Vídeo tutorial después del listado de productos

Tienes una categoría "Máquinas de café" y quieres mostrar un vídeo de guía de compra debajo de todos los productos. Establece Posición del vídeo en Después de los productos y usa una URL de Vimeo en el panel de vídeo de la categoría. Los clientes terminan de revisar la cuadrícula de productos y luego ven el tutorial.

Notas importantes

• Solo se puede asignar un vídeo por categoría. Asignar una nueva URL a una categoría que ya tiene un vídeo sobrescribe la entrada anterior.
• La función es compatible con PrestaShop 1.6 y 1.7+. En 1.7+ usa displayCategoryAdditionalDescription; en 1.6 usa displayHeaderCategory. Ambos hooks invocan la misma lógica de renderizado.
• El modo de fondo está diseñado para vídeos de YouTube, Vimeo y archivos de vídeo HTML5. Los proveedores personalizados (configurados en Proveedores adicionales) no son compatibles con el modo de fondo — recurren a un iframe, que puede no rellenar el contenedor correctamente.
• Vídeos de categoría es una función por tienda. Si utilizas una configuración multitiendo, las asignaciones de vídeo y los ajustes de visualización globales se aplican por contexto de tienda. Cambia de tienda antes de asignar vídeos o modificar ajustes para asegurarte de que surten efecto en la tienda correcta.
• La superposición de descripción en el modo de fondo elimina las etiquetas HTML de la descripción de la categoría y trunca el texto a 200 caracteres. Si la descripción de tu categoría tiene formato HTML, la superposición mostrará solo texto sin formato.
• Si un selector CSS personalizado no encuentra ningún elemento coincidente en la página, el vídeo se muestra igualmente — se muestra en su posición de renderizado predeterminada en el código fuente de la página, sin ser reposicionado.

Solución de problemas

Problema	Solución
El vídeo no aparece en la página de categoría	Confirma que Habilitar vídeos de categoría está en Sí en los ajustes del módulo. Verifica también que haya una URL de vídeo guardada en esa categoría específica (edita la categoría y comprueba el panel de vídeo).
El vídeo de fondo aparece pero cubre el área incorrecta	El Selector de cabecera de categoría en Compatibilidad con el tema no coincide con el elemento de cabecera de tu tema. Inspecciona la página de categoría con las herramientas de desarrollo del navegador para encontrar el selector CSS correcto y actualízalo.
El reproductor en línea aparece en la posición incorrecta	Tu tema puede utilizar nombres de clase distintos a los predeterminados. Cambia Posición del vídeo a Selector personalizado e introduce el selector CSS exacto para el bloque de descripción o el contenedor de listado de productos de tu tema.
El vídeo de fondo no se reproduce automáticamente	Los navegadores requieren que los vídeos estén silenciados antes de permitir la reproducción automática. Los fondos de YouTube y Vimeo siempre están silenciados automáticamente. Para archivos HTML5, el módulo establece el atributo muted. Si la reproducción automática sigue fallando, comprueba la configuración de política de reproducción automática de tu navegador.
El nombre o la descripción de la categoría no son legibles sobre el vídeo	Aumenta la Opacidad de la superposición para que la capa con tinte genere más contraste, o cambia el Color de superposición a un tono que complemente mejor el contenido del vídeo.
El vídeo está asignado pero el módulo se acaba de instalar y no aparece nada	Tras instalar o actualizar el módulo, limpia la caché de PrestaShop desde Parámetros avanzados > Rendimiento para que se carguen las nuevas plantillas.

Preguntas frecuentes

¿Puedo usar un vídeo diferente para escritorio y móvil?

No. Se usa la misma URL de vídeo en todos los tamaños de pantalla. En el modo de fondo, el módulo escala el vídeo para rellenar el contenedor en cualquier anchura de ventana, por lo que el mismo clip funciona tanto en escritorio como en móvil.

¿El vídeo de categoría aparece en los listados de productos dentro de esa categoría?

No. Vídeos de categoría solo aparece en la propia página de categoría. Para mostrar vídeos dentro de la cuadrícula de productos (en las fichas de producto), usa la función Listados de productos.

¿Qué ocurre si elimino una categoría que tiene un vídeo asignado?

La asignación del vídeo se almacena con una referencia al ID de categoría. Al eliminar la categoría desde el Back Office se elimina el registro de la categoría, y la asignación de vídeo huérfana simplemente no se mostrará nunca (no existe ninguna página de categoría donde mostrarla). No genera ningún error.

¿Puedo asignar un vídeo a la categoría de inicio o a la categoría raíz?

Sí. Cualquier categoría visible en Catálogo > Categorías puede tener un vídeo asignado mediante el panel de vídeo de su formulario de edición, incluida la categoría de inicio si tu tema la renderiza como una página de categoría navegable.

El vídeo de fondo parpadea o muestra un breve fotograma blanco antes de reproducirse. ¿Es normal?

Un breve retraso antes de que se cargue el vídeo es normal, especialmente con conexiones lentas. Los vídeos de YouTube y Vimeo requieren que se inicialice la API del reproductor externo. Puedes reducir el impacto visual aumentando ligeramente la opacidad de la superposición, lo que oculta el estado vacío antes de que aparezca el primer fotograma del vídeo.

¿Puedo mostrar un vídeo en todas las categorías sin asignar uno individualmente?

No. Los vídeos deben asignarse por categoría. No existe un vídeo de reserva global que se aplique a todas las categorías a la vez.

¿Afectará el vídeo de categoría al SEO de mi página?

El módulo genera elementos <iframe> y <video> estándar — del mismo modo que aparecería cualquier vídeo incrustado. No se genera ningún tratamiento SEO especial ni marcado Schema.org para los vídeos de categoría (esa función se aplica solo a los vídeos de producto).

Funciones relacionadas

• Listados de productos — Muestra miniaturas o iconos de vídeo en las fichas de producto dentro de la cuadrícula de categoría
• Compatibilidad con el tema — Ajusta el Selector de cabecera de categoría y otros selectores CSS específicos del tema