Video

Bloque de vídeo completo con fuentes independientes para móvil y escritorio. Combina en un único asset el reproductor de vídeo con un botón CTA posicionable, un bloque de texto (mismo modelo que el asset Text) y un contador regresivo opcional (mismo modelo que Countdown).

Vista previa

Sin imagen disponible aún. Añade una captura en ./img/video.jpg y descomenta la línea siguiente.

Comportamiento

visible controla si el bloque completo se renderiza.
fullwidth: true hace que el vídeo ocupe el 100% del ancho del contenedor.
mobile y desktop permiten usar fuentes distintas por breakpoint (archivo MP4 o vídeo de YouTube).
El botón CTA se posiciona dentro del vídeo con button.position (vertical: top/bottom, horizontal: left/right). Si button.visible: false, no se muestra.
El link envuelve el bloque completo: al hacer clic en cualquier zona navega a esa URL.
El bloque text funciona de forma idéntica al content asset Text: cinco secciones (title, subtitle, primary, secondary, tertiary) con soporte HTML, color y etiqueta HTML configurable.
El countdown sigue la misma estructura que el content asset Countdown.

Configuración

El JSON se introduce en el cuerpo del content asset en Business Manager → Content Assets.

{
  "visible": true,
  "fullwidth": false,
  "mobile": {
    "type": "file",
    "source": "https://cdn.hawkers.com/media/video-mobile.mp4",
    "poster": "pages/video/poster-mobile.jpg?$staticlink$"
  },
  "desktop": {
    "type": "youtube",
    "source": "dQw4w9WgXcQ",
    "poster": "pages/video/poster-desktop.jpg?$staticlink$"
  },
  "link": {
    "url": "$url('Search-Show', 'cgid', 'novedades')$",
    "target": "_self"
  },
  "button": {
    "visible": true,
    "text": "VER COLECCIÓN",
    "position": {
      "vertical": "bottom",
      "horizontal": "right"
    },
    "color": {
      "text": {
        "default": "#000000",
        "hover": "#ffffff"
      },
      "background": {
        "default": "#ffffff",
        "hover": "#000000"
      }
    }
  },
  "text": {
    "centered": false,
    "title": {
      "visible": true,
      "content": "Colección <strong>Verano</strong>",
      "color": "#ffffff",
      "tag": "h2"
    },
    "subtitle": { "visible": false, "content": "", "color": "", "tag": "h3" },
    "primary": { "visible": false, "content": "", "color": "" },
    "secondary": { "visible": false, "content": "", "color": "" },
    "tertiary": { "visible": false, "content": "", "color": "" }
  },
  "countdown": {
    "start": "Jun 01, 2025 00:00:00",
    "end": "Sep 30, 2025 23:59:59",
    "option": {
      "visible": false,
      "type": "flipdown",
      "show_days": true,
      "show_labels": true,
      "is_bold": true
    },
    "label": {
      "days": "d",
      "hours": "h",
      "minutes": "m",
      "seconds": "s"
    },
    "color": {
      "text": "#ffffff",
      "background": "#000000",
      "background_opacity": "0.5"
    }
  }
}

Propiedades

Raíz

Propiedad	Tipo	Obligatorio	Descripción
`visible`	`boolean`	Sí	Si `false`, el bloque completo no se renderiza.
`fullwidth`	`boolean`	No	Si `true`, el vídeo ocupa el ancho completo del contenedor.

Vídeo — `mobile` / `desktop`

type: file (MP4)
type: youtube

{
  "type": "file",
  "source": "https://cdn.hawkers.com/media/video-mobile.mp4",
  "poster": "pages/video/poster.jpg?$staticlink$"
}

Propiedad	Tipo	Descripción
`type`	`string`	`"file"` para vídeo MP4.
`source`	`string`	URL absoluta del fichero MP4.
`poster`	`string`	Imagen de portada mientras carga el vídeo. Debe terminar en `?$staticlink$`.

{
  "type": "youtube",
  "source": "dQw4w9WgXcQ",
  "poster": "pages/video/poster.jpg?$staticlink$"
}

Propiedad	Tipo	Descripción
`type`	`string`	`"youtube"` para vídeo de YouTube.
`source`	`string`	ID del vídeo de YouTube (la parte final de la URL: `youtube.com/watch?v=`ID`).
`poster`	`string`	Imagen de portada mientras carga el vídeo. Debe terminar en `?$staticlink$`.

Enlace (`link`)

Propiedad	Tipo	Obligatorio	Descripción
`link.url`	`string`	No	URL de destino al hacer clic en el bloque. Admite expresiones `$url` de SFCC.
`link.target`	`string`	No	`"_self"` o `"_blank"`.

Botón CTA (`button`)

Propiedad	Tipo	Obligatorio	Descripción
`button.visible`	`boolean`	Sí	Si `false`, el botón no se muestra.
`button.text`	`string`	Sí	Texto del botón.
`button.position.vertical`	`string`	No	Posición vertical: `"top"` o `"bottom"`.
`button.position.horizontal`	`string`	No	Posición horizontal: `"left"` o `"right"`.
`button.color.text.default`	`string`	No	Color del texto en estado normal.
`button.color.text.hover`	`string`	No	Color del texto en hover.
`button.color.background.default`	`string`	No	Color de fondo en estado normal.
`button.color.background.hover`	`string`	No	Color de fondo en hover.

Texto (`text`)

Misma estructura que el content asset Text: cinco secciones (title, subtitle, primary, secondary, tertiary), cada una con visible, content (HTML), color y tag (solo en title y subtitle). Consulta la documentación de Text para la referencia completa.

Contador regresivo (`countdown`)

Misma estructura que el content asset Countdown: start, end, option (type, show_days, show_labels, is_bold), label y color. Consulta la documentación de Countdown para la referencia completa.

Notas y consejos

Fichero de plantilla

content/video.isml

Fuentes distintas por breakpoint

Puedes usar un MP4 en móvil y YouTube en escritorio (o viceversa). Esto permite optimizar el rendimiento en móvil con un fichero ligero sin depender de YouTube:

"mobile": { "type": "file", "source": "https://cdn.hawkers.com/video-mobile.mp4", "poster": "..." },
"desktop": { "type": "youtube", "source": "ID_YOUTUBE", "poster": "..." }

Posicionamiento del botón

El botón CTA se ubica sobre el vídeo con las propiedades vertical y horizontal:

`vertical`	`horizontal`	Resultado
`"bottom"`	`"right"`	Esquina inferior derecha
`"bottom"`	`"left"`	Esquina inferior izquierda
`"top"`	`"right"`	Esquina superior derecha
`"top"`	`"left"`	Esquina superior izquierda

ID de YouTube

El source para vídeos de YouTube es solo el ID (no la URL completa):

https://www.youtube.com/watch?v=dQw4w9WgXcQ
                                ^^^^^^^^^^^^ → este es el ID

Desactivar el countdown sin borrarlo

Pon countdown.option.visible: false para ocultar el contador sin eliminar la configuración de fechas:

"countdown": {
  "start": "Jun 01, 2025 00:00:00",
  "end": "Sep 30, 2025 23:59:59",
  "option": { "visible": false, ... }
}

Vista previa​

Comportamiento​

Configuración​

Propiedades​

Raíz​

Vídeo — mobile / desktop​

Enlace (link)​

Botón CTA (button)​

Texto (text)​

Contador regresivo (countdown)​

Notas y consejos​