Pular para o conteúdo
charmotion
Comece agora

Como adicionar animações Lottie, Rive e vídeo ao WordPress

Por equipe Charmotion · Atualizado em

Ilustração de capa do guia: Como adicionar animações Lottie, Rive e em vídeo ao WordPress, com personagens de demonstração do Charmotion

Para adicionar Lottie ao WordPress, instale o plugin oficial da LottieFiles e insira o bloco dele, ou cole um web component do dotLottie em um bloco HTML personalizado. O WordPress nativo já lida com vídeo: o bloco Vídeo pode reproduzir automaticamente, em loop, sem áudio e inline. O Rive precisa de um plugin de terceiros, como o MotionPlayer, ou de um embed em HTML personalizado.

Principais pontos

  • O bloco Vídeo nativo tem as configurações Reprodução automática, Loop, Sem áudio, Reproduzir inline e Pré-carregamento.
  • O WordPress nativo não tem bloco de Lottie nem de Rive; use plugins ou HTML personalizado.
  • A LottieFiles publica um plugin oficial feito para o editor de blocos.
  • Scripts no HTML personalizado exigem a permissão unfiltered_html.
  • Ative as opções Sem áudio e Reproduzir inline, ou a reprodução automática falha nos celulares.

Já tem um personagem ou logo? Veja seu personagem em telas reais de app: telas de splash, onboarding, carregamento e estado vazio. É grátis, roda no navegador e não envia nada.

O bloco Vídeo nativo consegue reproduzir automaticamente e em loop?

Sim. O bloco Vídeo do editor de blocos tem opções de Reprodução automática, Loop, Sem áudio, Reproduzir inline, Controles de reprodução, Pré-carregamento e imagem de pôster. Isso resolve a clássica animação em loop "estilo GIF" sem nenhum plugin.

Para um loop sem som que começa sozinho:

  1. Adicione um bloco Vídeo e envie ou selecione um MP4.
  2. Ative Reprodução automática, Loop, Sem som e Reproduzir em linha.
  3. Desative Controles de reprodução se o vídeo for apenas decorativo.
  4. Defina Pré-carregamento como Metadados ou Nenhum para vídeos abaixo da primeira dobra e escolha uma imagem de pôster.

Sem som e Reproduzir em linha não são opcionais. Os navegadores só reproduzem automaticamente vídeos sem som, e o Safari do iPhone só reproduz vídeo em linha com o atributo playsinline, que a opção Reproduzir em linha adiciona.

O bloco Vídeo aceita um único arquivo, então não oferece a configuração com duas fontes que o vídeo com fundo transparente precisa para funcionar no Safari e no Chrome. Use-o com um MP4 sobre uma cor de fundo igual à da página, ou veja a seção de HTML personalizado para uma versão transparente.

Como adicionar Lottie no editor de blocos?

O núcleo do WordPress não tem bloco de Lottie. O caminho mais simples é o plugin oficial da LottieFiles, feito para o editor de blocos:

  1. Em Plugins, depois Adicionar novo, pesquise "LottieFiles" e instale o plugin publicado pela LottieFiles.
  2. Ative o plugin e adicione o bloco dele a um post ou página.
  3. Escolha uma animação da sua conta LottieFiles ou informe a URL de um arquivo, e configure loop e reprodução automática.

Plugins adicionam scripts e telas de configuração próprios, então confira na página do plugin o que a versão atual suporta antes de contar com uma opção específica.

Se preferir não instalar um plugin, o web component do dotLottie funciona em um bloco HTML personalizado, como mostrado abaixo. Em qualquer caso, use Lottie para ilustrações que tocam do início ao fim, como o desenho de um estado vazio ou um ícone animado. Para um mascote que muda de estado, um arquivo Rive costuma ser a melhor escolha.

Gráfico de barras com tamanhos reais de arquivo de um conjunto de 17 animações: Rive com 40 KB contra 2,6 MB em MP4, 6,1 MB em WebM com fundo transparente, 8,0 MB em GIF e 9,4 MB em MOV HEVC
Tamanhos de arquivo de um conjunto real do Charmotion (Pip). Os tamanhos de vídeo se referem a uma única animação de 4 segundos.

Existe plugin de Rive para WordPress?

Não há bloco de Rive no núcleo do WordPress e, até outubro de 2026, nenhum plugin publicado pelo Rive. Um plugin de terceiros, o MotionPlayer for Rive, adiciona um bloco que permite enviar ou selecionar arquivos .riv na Biblioteca de mídia; ele inclui o runtime web WebGL2 do Rive. Avalie o histórico de atualizações e o suporte de qualquer plugin de terceiros antes de instalá-lo em um site em produção.

A alternativa é um bloco HTML personalizado com o runtime web oficial do Rive, que dá controle total, incluindo Data Binding para humores e triggers.

Um obstáculo prático: o WordPress só aceita upload de tipos de arquivo da sua lista de permitidos, e .riv e .lottie não são tipos padrão. Um plugin feito para o formato normalmente resolve isso. Caso contrário, hospede o arquivo em um local que você controla, como a pasta do tema ou uma CDN, e use a URL dele.

Se você pretende usar Rive no site inteiro, um único arquivo de personagem atende vários lugares ao mesmo tempo: idle no cabeçalho, thinking na página de busca, uma reação success na mensagem de agradecimento do formulário de contato. O guia o que é Rive explica o modelo de state machine.

Maquete de site com um título à esquerda e Kiko, um mascote animado, rodando a partir de um arquivo Rive no hero
Um mascote na seção hero de um site: um pequeno arquivo Rive em um canvas ao lado do título.

Seja qual for o caminho, dê ao canvas largura e altura fixas no bloco ou no CSS. O Rive desenha em um canvas sem tamanho intrínseco, então, sem dimensões, ele pode sumir em alguns temas ou se esticar por uma coluna de largura total.

Como incorporar Rive ou Lottie com um bloco HTML personalizado?

O bloco HTML personalizado aceita marcação pura. A partir do WordPress 7.0, ele tem painéis separados para HTML, CSS e JavaScript, mas os painéis de CSS e JavaScript só aparecem para usuários com a permissão unfiltered_html. Para os demais usuários, o WordPress passa o conteúdo por wp_kses() e remove tags como <script> e <iframe> ao salvar.

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, com um humor definido ao carregar:

<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>

Vídeo com fundo transparente, incluindo Safari:

<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>

O Charmotion exporta os três a partir de um único upload: um .riv com um número mood e triggers de reação, WebM e MOV transparentes, além de MP4 e GIF. O MP4 e o GIF bastam para o bloco Vídeo nativo; todos os arquivos vêm com os planos pagos.

Como evitar que uma animação deixe a página do WordPress lenta?

Plugins de animação e embeds costumam carregar scripts em todas as páginas. Algumas verificações mantêm esse custo sob controle:

  • Carregue players só onde forem usados. Prefira um bloco HTML personalizado na página específica a um script no cabeçalho do site inteiro. Se usar um plugin, verifique se ele só carrega os arquivos nas páginas que têm o bloco dele.
  • Use Pré-carregamento: Nenhum ou Metadados para vídeos que não aparecem ao carregar a página, e sempre defina uma imagem de pôster.
  • Prefira MP4 ou WebM a GIF. No exemplo do web.dev, um GIF de 3,7 MB virou um MP4 de 551 KB e um WebM de 341 KB.
  • Defina o tamanho de toda animação. Informe largura e altura em canvas, players e vídeos para que o layout não se desloque enquanto carregam.
  • Respeite o movimento reduzido. Adicione uma verificação de prefers-reduced-motion ao script do HTML personalizado e pause ou pule a reprodução automática quando a preferência estiver ativa.

Teste com o plugin de cache ou otimização ativo. Alguns combinam ou adiam scripts de formas que quebram web components e scripts de módulo, então exclua o script do player se a animação parar de aparecer.

Como adicionar uma animação em loop a uma página do WordPress

  1. Escolha o formato. Use um MP4 para um loop simples, um arquivo Lottie para uma ilustração vetorial ou um .riv para um personagem interativo.
  2. Para vídeo, adicione um bloco Vídeo. Envie o MP4 e ative Reprodução automática, Loop, Sem som e Reproduzir em linha; depois defina uma imagem de pôster.
  3. Para Lottie, use o plugin ou um embed. Instale o plugin oficial da LottieFiles ou cole o web component do dotLottie em um bloco HTML personalizado.
  4. Para Rive, use um plugin ou um embed. Use um plugin de bloco de Rive ou um bloco HTML personalizado com o runtime web do Rive e o seu .riv hospedado.
  5. Confira permissões e velocidade. Confirme que sua função tem unfiltered_html para usar scripts e teste a velocidade da página com o cache ativo.

Perguntas frequentes

Por que o WordPress removeu minha tag script?

Provavelmente sua função de usuário não tem a permissão unfiltered_html. Nesse caso, o WordPress higieniza o HTML personalizado com wp_kses() e remove as tags <script> e <iframe> ao salvar. Peça a um administrador para adicionar o embed ou use um bloco de plugin que carregue o player para você, em vez de script puro.

Posso enviar um arquivo .riv ou .lottie para a Biblioteca de mídia?

Em muitas instalações, não por padrão, porque o WordPress só aceita tipos de arquivo da sua lista de permitidos. Um plugin feito para o formato normalmente cuida dos uploads. Caso contrário, hospede o arquivo na pasta do tema ou em uma CDN e use a URL dele.

Por que meu vídeo do WordPress não reproduz automaticamente no celular?

Ative Sem som e Reproduzir em linha nas configurações do bloco Vídeo. Navegadores mobile só reproduzem automaticamente vídeos sem som, e o Safari do iPhone só reproduz em linha com playsinline. O Modo de Pouca Energia ainda pode bloquear a reprodução automática, então defina uma imagem de pôster que funcione sozinha.

Respostas rápidas deste guia

Fontes

Guias relacionados