Cómo agregar animaciones de Lottie, Rive y video a WordPress

¿El bloque Video nativo puede reproducirse automáticamente y en loop?

Sí. El bloque Video del editor de bloques tiene ajustes de Reproducción automática, Bucle, Silenciado, Reproducir en línea, Controles de reproducción, Precarga y una imagen de póster. Con eso cubres la clásica animación en loop "tipo GIF" sin ningún plugin.

Para un loop silencioso que empiece solo:

1. Agrega un bloque Video y sube o selecciona un MP4.
2. Activa Reproducción automática, Bucle, Silenciado y Reproducir en línea.
3. Desactiva Controles de reproducción si el video es decorativo.
4. Configura Precarga en Metadatos o Ninguna para los videos que no se ven al cargar la página, y elige una imagen de póster.

Silenciado y Reproducir en línea no son opcionales. Los navegadores solo reproducen automáticamente video silenciado, y Safari en iPhone reproduce video en línea solo con el atributo playsinline, que es lo que agrega el ajuste Reproducir en línea.

El bloque Video admite un solo archivo, así que no puede ofrecer la configuración de dos fuentes que necesita el video con fondo transparente en Safari y Chrome. Úsalo con un MP4 sobre un color de fondo que coincida, o consulta la sección de HTML personalizado para una versión transparente.

¿Cómo se agrega Lottie en el editor de bloques?

El núcleo de WordPress no tiene un bloque de Lottie. La vía más sencilla es el plugin oficial de LottieFiles, creado para el editor de bloques:

1. En Plugins, luego Añadir nuevo, busca "LottieFiles" e instala el plugin publicado por LottieFiles.
2. Actívalo y luego agrega su bloque a una entrada o página.
3. Elige una animación de tu cuenta de LottieFiles o indica la URL de un archivo, y configura el loop y la reproducción automática.

Los plugins agregan sus propios scripts y pantallas de ajustes, así que revisa la página del plugin para ver qué admite la versión actual antes de depender de una opción concreta.

Si prefieres no agregar un plugin, el web component de dotLottie funciona en un bloque HTML personalizado, como se muestra más abajo. En cualquier caso, usa Lottie para ilustraciones que se reproducen de principio a fin, como un dibujo de estado vacío o un ícono animado. Para una mascota de marca que cambia de estado, un archivo de Rive suele encajar mejor.

¿Existe un plugin de Rive para WordPress?

No hay un bloque de Rive en el núcleo de WordPress y, a octubre de 2026, tampoco un plugin publicado por Rive. Un plugin de terceros, MotionPlayer for Rive, agrega un bloque que te permite subir o seleccionar archivos .riv desde la Biblioteca de medios; incluye el runtime web WebGL2 de Rive. Revisa el historial de actualizaciones y el soporte de cualquier plugin de terceros antes de instalarlo en un sitio en producción.

La alternativa es un bloque HTML personalizado con el runtime web propio de Rive, que te da control total, incluido Data Binding para estados de ánimo y triggers.

Un obstáculo práctico: WordPress solo acepta cargas de tipos de archivo que están en su lista permitida, y .riv y .lottie no son tipos estándar. Un plugin creado para el formato suele resolverlo. Si no, aloja el archivo en un lugar que controles, como la carpeta de tu tema o una CDN, y haz referencia a su URL.

Si piensas usar Rive en todo un sitio, un solo archivo de personaje cubre muchos lugares a la vez: reposo (idle) en el header, pensando en la página de búsqueda, una reacción de éxito en el mensaje de agradecimiento del formulario de contacto. La guía sobre qué es Rive explica el modelo de máquina de estados (state machine).

Sea cual sea la vía que elijas, dale al canvas un ancho y un alto fijos en el bloque o en su CSS. Rive dibuja en un canvas que no tiene tamaño intrínseco, así que sin dimensiones puede colapsar hasta desaparecer en algunos temas o estirarse a lo ancho de una columna completa.

¿Cómo insertar Rive o Lottie con un bloque HTML personalizado?

El bloque HTML personalizado acepta marcado sin procesar. A partir de WordPress 7.0 tiene paneles separados para HTML, CSS y JavaScript, pero los paneles de CSS y JavaScript solo aparecen para usuarios con la capacidad unfiltered_html. Para los demás usuarios, WordPress pasa el contenido por wp_kses() y elimina etiquetas como <script> y <iframe> al guardar.

dotLottie:

<dotlottie-wc src="/animations/confetti.lottie" autoplay loop
  style="width: 320px; height: 320px"></dotlottie-wc>
<script type="module"
  src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.10.0/dist/dotlottie-wc.js"></script>

Rive, con un estado de ánimo definido al cargar:

<canvas id="mascot" width="400" height="400"
        role="img" aria-label="Animated mascot"></canvas>
<script src="https://unpkg.com/@rive-app/webgl2@2.44.2"></script>
<script>
  const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
  const r = new rive.Rive({
    src: "/wp-content/uploads/mascot.riv",
    canvas: document.getElementById("mascot"),
    stateMachine: "CharacterViewModelMachine",
    autoplay: !reduce,
    autoBind: true,
    onLoad: () => r.resizeDrawingSurfaceToCanvas(),
  });
</script>
<script>
  r.on(rive.EventType.Load, () => {
    r.viewModelInstance.number("mood").value = 2; // wave
  });
</script>

Video con fondo transparente, Safari incluido:

<video autoplay muted loop playsinline preload="metadata"
       width="400" height="400" poster="/mascot-poster.png">
  <!-- Safari: HEVC with alpha must come first -->
  <source src="/mascot.mov" type="video/quicktime; codecs=hvc1.1.6.H120.b0">
  <!-- Chrome, Edge, Firefox: VP9 with alpha -->
  <source src="/mascot.webm" type="video/webm; codecs=vp09.00.41.08">
</video>

Charmotion exporta los tres a partir de una sola imagen subida: un .riv con un número mood y triggers de reacción, WebM y MOV transparentes, además de MP4 y GIF. El MP4 y el GIF bastan para el bloque Video básico; todos los archivos vienen con los planes de pago.

¿Cómo evitar que una animación de WordPress ralentice la página?

Los plugins de animación y los embeds suelen cargar sus scripts en todas las páginas. Unas cuantas comprobaciones mantienen el costo bajo control:

• Carga los reproductores solo donde se usan. Prefiere un bloque HTML personalizado en la página concreta en lugar de un script en el header de todo el sitio. Si usas un plugin, comprueba si encola sus recursos solo en las páginas que tienen su bloque.
• Usa Precarga: Ninguna o Metadatos para los videos que no se ven al cargar, y define siempre una imagen de póster.
• Prefiere MP4 o WebM antes que GIF. En el ejemplo de web.dev, un GIF de 3.7 MB pasó a ser un MP4 de 551 KB y un WebM de 341 KB.
• Define el tamaño de cada animación. Asigna ancho y alto a canvas, reproductores y videos para que el diseño no se desplace mientras cargan.
• Respeta el movimiento reducido. Agrega una comprobación de prefers-reduced-motion en el script de tu HTML personalizado y pausa u omite la reproducción automática cuando esté activado.

Haz pruebas con tu plugin de caché u optimización activo. Algunos combinan o aplazan scripts de formas que rompen los web components y los scripts de módulo, así que excluye el script del reproductor si la animación deja de aparecer.

Cómo agregar una animación en loop a una página de WordPress

1. Elige el formato. Usa un MP4 para un loop sencillo, un archivo Lottie para una ilustración vectorial o un .riv para un personaje interactivo.
2. Para video, agrega un bloque Video. Sube el MP4 y activa Reproducción automática, Bucle, Silenciado y Reproducir en línea; luego define una imagen de póster.
3. Para Lottie, agrega el plugin o un embed. Instala el plugin oficial de LottieFiles o pega el web component de dotLottie en un bloque HTML personalizado.
4. Para Rive, agrega un plugin o un embed. Usa un plugin de bloque de Rive, o un bloque HTML personalizado con el runtime web de Rive y tu .riv alojado.
5. Revisa permisos y velocidad. Asegúrate de que tu rol tenga unfiltered_html para los scripts y luego prueba la velocidad de la página con la caché activada.

Preguntas frecuentes

¿Por qué WordPress eliminó mi etiqueta script?

Probablemente tu rol de usuario no tiene la capacidad unfiltered_html. En ese caso, WordPress sanea el HTML personalizado con wp_kses() y elimina las etiquetas <script> y <iframe> al guardar. Pídele a un administrador que agregue el embed, o usa un bloque de plugin que cargue el reproductor por ti en lugar de un script sin procesar.

¿Puedo subir un archivo .riv o .lottie a la Biblioteca de medios?

En muchas instalaciones no, de forma predeterminada, porque WordPress solo acepta los tipos de archivo de su lista permitida. Un plugin creado para el formato suele encargarse de las cargas. Si no, aloja el archivo en la carpeta de tu tema o en una CDN y haz referencia a su URL.

¿Por qué mi video de WordPress no se reproduce automáticamente en el teléfono?

Activa Silenciado y Reproducir en línea en los ajustes del bloque Video. Los navegadores móviles solo reproducen automáticamente video silenciado, y Safari en iPhone reproduce en línea solo con playsinline. El modo de bajo consumo aún puede bloquear la reproducción automática, así que define una imagen de póster que funcione por sí sola.

Respuestas rápidas de esta guía

• ¿Cómo agrego animaciones a un sitio de WordPress?

Fuentes

• Video block, WordPress.org
• Custom HTML block, WordPress.org
• LottieFiles plugin, WordPress.org Plugins
• MotionPlayer for Rive, WordPress.org Plugins
• dotlottie-web: players for web, React, Vue, Svelte and web components, LottieFiles on GitHub
• Web (JS) runtime, Rive
• New video policies for iOS, WebKit