---
title: "Vídeo en Shopify con Liquid: autoplay, sin sonido y en bucle"
description: "Para que un vídeo de Shopify arranque solo, sin sonido y en bucle, el HTML necesita cuatro atributos y el archivo tiene que ser MP4 H.264. Esta guía muestra el código Liquid con el filtro video_tag y con la etiqueta video escrita a mano, dónde ponerlo en el tema y por qué falla en iPhone."
author: "Aashish Kaushik"
published: 2026-09-20T05:00:47.681Z
updated: 2026-09-20T05:00:47.687Z
url: https://blog.swipereel.app/es/video-shopify-con-liquid-autoplay-sin-sonido-bucle
---
# Vídeo en Shopify con Liquid: autoplay, sin sonido y en bucle

## Key takeaways

- Los cuatro atributos que necesita un vídeo para reproducirse solo en cualquier navegador son autoplay, muted, loop y playsinline; sin muted y playsinline, Safari e iOS lo bloquean.
- El filtro video_tag de Liquid es la vía rápida; la etiqueta video escrita a mano con media.sources te da control total sobre atributos, poster y preload.
- El archivo debe ser MP4 con códec H.264; un HEVC grabado con iPhone puede fallar en otro iPhone aunque Shopify lo acepte.
- Si el vídeo va a ir en varias páginas, con productos etiquetados o en formato vertical, un bloque de app te ahorra mantener el Liquid en cada actualización del tema.

Para que un vídeo se reproduzca solo, sin sonido y en bucle en Shopify, la etiqueta video necesita cuatro atributos: autoplay, muted, loop y playsinline. Los dos últimos son los que Safari e iOS exigen para permitir la reproducción automática, y son los que la mayoría de temas olvidan. Además, el archivo tiene que ser MP4 con códec H.264. Con eso, el vídeo arranca en cualquier navegador; sin eso, se queda quieto en iPhone.

Esta guía muestra las dos formas de escribirlo en Liquid (el filtro video_tag y la etiqueta video a mano con media.sources), cómo aplicarlo a un vídeo de producto y a un vídeo de sección, por qué falla en iOS, cómo evitar que penalice la velocidad y cuándo es mejor dejar Liquid y usar un bloque de app. Si todavía tienes dudas sobre el formato del archivo, la [guía de tamaño y formato de vídeo para Shopify](/es/tamano-formato-video-para-shopify-guia-2027) va primero.

## Los cuatro atributos, y por qué cada uno

Cada atributo cubre un bloqueo distinto de los navegadores, y falta cualquiera de ellos y el vídeo no arranca en algún dispositivo.

- autoplay. Le dice al navegador que empiece a reproducir sin que el usuario toque nada. Solo, no basta: todos los navegadores modernos lo ignoran si el vídeo tiene sonido.
- muted. Silencia el vídeo. Es la condición que Chrome, Safari y Firefox ponen para respetar autoplay. Sin muted, no hay reproducción automática en ningún sitio.
- loop. Vuelve a empezar al terminar. Para un clip de producto de 15 segundos es lo que quieres; para un vídeo de tres minutos, no.
- playsinline. Le dice a iOS que reproduzca el vídeo dentro de la página en lugar de abrirlo a pantalla completa. Sin él, iPhone no arranca el vídeo automáticamente aunque esté silenciado.

Con los cuatro, el HTML mínimo es este:

```html

<video autoplay muted loop playsinline preload="metadata" poster="...">

  <source src="video.mp4" type="video/mp4">

</video>

```

Lo demás (poster, preload, controls) es rendimiento y presentación, y lo vemos más abajo.

## Opción 1: el filtro video_tag de Liquid

Es la vía más corta si el vídeo está en Shopify, sea en la galería de un producto o en un ajuste de sección.

El filtro toma un objeto de vídeo y genera la etiqueta completa con las fuentes que Shopify procesó. Para el primer vídeo de la galería de un producto:

```liquid

{% for media in product.media %}

  {% if media.media_type == 'video' %}

    {{ media | video_tag: autoplay: true, muted: true, loop: true, controls: false, image_size: '1080x' }}

    {% break %}

  {% endif %}

{% endfor %}

```

El parámetro image_size fija el tamaño de la imagen de vista previa que se usa como poster. controls en false quita la barra de reproducción, adecuado para un clip decorativo; déjalo en true si el visitante debe poder pausar.

Un aviso sobre playsinline: el filtro no lo acepta como parámetro. Comprueba en el HTML generado (Inspeccionar en el navegador) si la etiqueta lo incluye. Si no aparece, y el vídeo no arranca en iPhone, pasa a la opción 2, que te da control total.

Este bloque va en la plantilla de producto de tu tema, normalmente en sections/main-product.liquid, o en un bloque personalizado si tu tema lo permite. El artículo en inglés sobre [vídeo con reproducción automática en la página de producto de Shopify](/shopify-autoplay-video-product-page) muestra dónde encajarlo en Dawn.

> **Haz una copia del tema antes de tocar Liquid**
> 
> Duplica el tema desde Tienda online > Temas antes de editar cualquier archivo, y trabaja sobre la copia. Un error de sintaxis en Liquid puede dejar la página de producto en blanco, y con la copia lo arreglas sin que la tienda deje de vender mientras tanto.

## Opción 2: la etiqueta video a mano con media.sources

Cuando necesitas todos los atributos, incluido playsinline, escribe la etiqueta tú y deja que Liquid rellene las fuentes.

Shopify genera varias versiones de cada vídeo al procesarlo y las expone en media.sources, cada una con su URL, formato y tipo MIME. El código recorre esas fuentes y emite solo las MP4:

```liquid

{% for media in product.media %}

  {% if media.media_type == 'video' %}

    <video autoplay muted loop playsinline preload="metadata"

      poster="{{ media.preview_image | image_url: width: 1080 }}"

      width="{{ media.preview_image.width }}"

      height="{{ media.preview_image.height }}">

      {% for source in media.sources %}

        {% if source.format == 'mp4' %}

          <source src="{{ source.url }}" type="{{ source.mime_type }}">

        {% endif %}

      {% endfor %}

    </video>

    {% break %}

  {% endif %}

{% endfor %}

```

Tres detalles que importan:

- poster usa la imagen de vista previa que Shopify extrae del vídeo. Se muestra al instante mientras el vídeo se descarga, y evita el hueco en blanco.
- width y height reservan el espacio en la página y evitan que el contenido salte cuando el vídeo aparece, algo que penaliza en las métricas de estabilidad visual.
- Solo fuentes MP4. media.sources incluye también una versión HLS (m3u8) que Safari reproduce y otros navegadores no; filtrar por formato mp4 es lo más seguro para una etiqueta video simple.

Si el tema es antiguo y recorre product.images en lugar de product.media, los vídeos no aparecen nunca, porque no son imágenes. El artículo en inglés sobre [vídeo nativo en la galería de Dawn y sus límites](/dawn-theme-product-video-native-media-limits-go) explica cómo actualizar ese bucle.

## Vídeo de una sección: ajuste de tipo video

Para un vídeo de marca en la página de inicio o en una colección, el vídeo no viene de un producto sino de un ajuste de la sección.

En el esquema de la sección, añade un ajuste de tipo video:

```liquid

{% schema %}

{

  "name": "Vídeo en bucle",

  "settings": [

    { "type": "video", "id": "video", "label": "Vídeo" },

    { "type": "checkbox", "id": "autoplay", "label": "Reproducir automáticamente", "default": true }

  ],

  "presets": [{ "name": "Vídeo en bucle" }]

}

{% endschema %}

```

El editor del tema mostrará un selector que lee de Contenido > Archivos. En el cuerpo de la sección, renderiza el vídeo con cualquiera de las dos opciones anteriores, sustituyendo media por section.settings.video:

```liquid

{% if section.settings.video %}

  {{ section.settings.video | video_tag: autoplay: section.settings.autoplay, muted: true, loop: true, controls: false }}

{% endif %}

```

Guarda la sección, ve a Tienda online > Temas > Personalizar, pulsa Añadir sección y elige Vídeo en bucle. Selecciona el archivo, y ya. Si necesitas playsinline garantizado, usa la etiqueta a mano con section.settings.video.sources igual que con media.sources.

## Por qué falla en Safari e iOS

Casi todos los tickets de "el vídeo no arranca en iPhone" tienen una de estas cuatro causas.

**Falta muted o playsinline.** iOS no reproduce automáticamente un vídeo con sonido ni un vídeo que no esté marcado para reproducirse en línea. Los dos atributos, siempre.

**El códec no es H.264.** Un archivo MOV o MP4 en HEVC, que es lo que graban muchos iPhone por defecto, puede fallar en Safari de otro dispositivo. Exporta en MP4 H.264. Shopify lo acepta y lo procesa, pero si el original es HEVC y el navegador pide una versión concreta, conviene no dejarlo al azar.

**Modo de ahorro de energía.** Cuando el iPhone está en ahorro de energía, bloquea la reproducción automática de todos los vídeos. No tiene arreglo desde tu código; el visitante verá el poster y un botón de reproducción. Es normal y no es un fallo de tu tema.

**JavaScript del tema que interfiere.** Algunos temas cargan el vídeo con un script propio que espera un clic. Si tu etiqueta video está dentro de un contenedor deferred-media de Dawn, el tema no la reproducirá hasta que el visitante toque. Saca el vídeo de ese contenedor o usa un bloque propio.

Los artículos en inglés sobre [vídeo que no se reproduce en Safari e iPhone](/shopify-video-not-playing-safari-iphone) y [autoplay que no funciona en móvil](/shopify-video-autoplay-not-working-mobile) recorren cada caso con la comprobación en las herramientas del navegador.

## Rendimiento: preload, poster y carga diferida

Un vídeo con autoplay es, por definición, un archivo que se descarga sin que nadie lo pida. Hay que hacerlo con cuidado.

**preload.** Con valor metadata, el navegador descarga solo la cabecera y espera. Con none, no descarga nada hasta que se reproduce. Con auto (o sin el atributo), descarga el vídeo entero al cargar la página. Para un vídeo con autoplay encima del pliegue, metadata; para uno más abajo, none más un pequeño script que lo arranque cuando entre en pantalla.

**poster.** Siempre. La imagen de vista previa de Shopify se muestra al instante y el visitante ve algo mientras llega el vídeo.

**Carga diferida.** Para vídeos que no están en la primera pantalla, no los cargues hasta que estén cerca. Un IntersectionObserver de diez líneas que añade la fuente y llama a play() cuando el vídeo entra en el viewport es suficiente:

```html

<script>

  const videos = document.querySelectorAll('video[data-lazy]');

  const io = new IntersectionObserver((entries) => {

    entries.forEach((e) => {

      if (e.isIntersecting) {

        e.target.querySelectorAll('source').forEach((s) => { s.src = s.dataset.src; });

        e.target.load();

        e.target.play();

        io.unobserve(e.target);

      }

    });

  }, { rootMargin: '200px' });

  videos.forEach((v) => io.observe(v));

</script>

```

Con este patrón, la etiqueta source lleva data-src en lugar de src y el vídeo lleva data-lazy. El vídeo se pide cuando está a 200 píxeles de aparecer, no antes.

**Peso.** Nada de lo anterior compensa un archivo de 80 MB. Un clip de 15 segundos en 1080p con bitrate moderado y sin pista de audio (ya que va silenciado) pesa poco y arranca rápido con datos móviles.

## Valores de preload y cuándo usar cada uno
| Valor | Qué descarga al cargar la página | Cuándo usarlo |
| --- | --- | --- |
| none | Nada | Vídeos por debajo del pliegue con carga diferida |
| metadata | Solo duración y dimensiones | Vídeo con autoplay en la primera pantalla |
| auto o sin atributo | El vídeo entero | Casi nunca en una tienda |

## Cuándo dejar Liquid y usar un bloque de app

Liquid es la herramienta correcta para un vídeo. Deja de serlo cuando son veinte, en varias páginas, con productos etiquetados.

El código de esta guía funciona y lo puedes mantener tú. Pero tiene tres costes que crecen con el uso. Cada actualización del tema puede pisar tu edición, y tienes que volver a aplicarla. Cada vídeo nuevo es una edición de plantilla o un ajuste más. Y ni video_tag ni la etiqueta a mano etiquetan productos, abren el carrito desde el vídeo ni te dicen cuántas ventas generó cada clip.

Un bloque de app de vídeo comprable resuelve los tres. Se añade desde el editor del tema como extensión, así que sobrevive a las actualizaciones. Gestiona muted, playsinline, poster, preload y carga diferida sin que escribas nada. Y añade el etiquetado y la analítica. SwipeReel, por ejemplo, ofrece cuatro widgets (Inline, Overlay, Stacked y Stories) con carga diferida que no bloquea el render, importa Reels de Instagram y vídeos de TikTok y mide vistas, añadidos al carrito e ingresos por vídeo; el plan gratuito incluye 25 vídeos subidos y 5 activos.

La regla práctica: Liquid para el vídeo de marca en la página de inicio y para una demostración en la galería del producto. App para Reels verticales, UGC y cualquier vídeo que deba vender por sí mismo. La guía sobre [cómo insertar un vídeo en Shopify en producto, inicio y colección](/es/como-insertar-video-shopify-producto-inicio-coleccion-2027) recoge las dos vías por ubicación.

## Depurar cuando no arranca

Cinco minutos con las herramientas del navegador resuelven casi todos los casos.

## Comprobación cuando el vídeo no se reproduce solo
- La etiqueta video en el HTML generado lleva autoplay, muted, loop y playsinline
- Hay al menos una fuente MP4 con tipo video/mp4
- El archivo original es H.264, no HEVC
- El poster se muestra (si no, la ruta de la imagen está mal)
- En la pestaña Red, el vídeo se pide y responde sin error
- No hay un contenedor deferred-media del tema envolviendo el vídeo
- Probado en un iPhone real sin modo de ahorro de energía
- Probado en una ventana privada para evitar la caché

Abre la página en el navegador, pulsa Inspeccionar sobre el hueco del vídeo y mira la etiqueta. Si faltan atributos, el problema está en tu Liquid. Si están todos y no hay source, Shopify no ha terminado de procesar el archivo. Si hay source y la pestaña Red muestra un error, el archivo o la CDN fallan. Si todo está bien y el vídeo sigue quieto en iPhone, es el ahorro de energía o un script del tema.

Anota cuál de estos casos ves antes de escribir al soporte del tema. Convierte una queja vaga en una pregunta que se responde en un mensaje.

**Reels con autoplay silencioso sin tocar Liquid**
SwipeReel muestra tus vídeos en widgets con carga diferida, reproducción silenciosa en iOS y productos etiquetados, como extensión del tema. Plan gratis con 25 vídeos subidos y 5 activos.

[Instalar SwipeReel gratis](https://apps.shopify.com/swipereel)

## FAQ

### ¿Cómo hago que un vídeo se reproduzca automáticamente en Shopify?

El elemento de vídeo debe llevar autoplay, muted, loop y playsinline, y el archivo debe ser MP4 H.264.

### ¿Por qué mi vídeo con autoplay no arranca en iPhone?

Safari e iOS bloquean la reproducción automática si el vídeo tiene sonido o no lleva playsinline. Añade muted y playsinline, comprueba que el códec es H.

### ¿Qué es el filtro video_tag de Liquid?

Es un filtro de Shopify que genera la etiqueta video completa a partir de un objeto de vídeo (de product.

### ¿Qué es media.sources?

Es la lista de versiones del vídeo que Shopify genera al procesarlo, con la URL, el formato y el tipo MIME de cada una.

### ¿Cómo pongo un vídeo en bucle sin sonido en la página de inicio?

Añade un ajuste de tipo video al esquema de tu sección, selecciona el vídeo desde Contenido > Archivos en el editor del tema y renderízalo con video_tag pasando autoplay, loop y muted, o con una etiqueta video a mano.

### ¿El vídeo con autoplay ralentiza la tienda?

Puede, si se descarga entero al abrir la página.

### ¿Es mejor Liquid o una app para vídeo con autoplay?

Liquid para un vídeo de marca en la página de inicio o una demostración en la galería, si no te importa mantener el código.