Embed .lottie in HTML

To embed a .lottie file on a website, you can use the dotLottie web player. This is usually the easiest way to display .lottie animations with autoplay, loop, and basic controls.

What is a .lottie file?

A .lottie file is a packaged version of a Lottie animation. It often downloads faster than JSON and can bundle metadata and assets. On the web, the simplest way to play it is with the dotLottie player component.

Basic embed (recommended)

This is the fastest way to embed. It loads the dotLottie player script once, then uses a dotlottie-player tag to render the animation.

See the Pen Embed .lottie in HTML by Motio Pix (@motiopix) on CodePen.


<!-- Load the dotLottie player once per page -->
<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.js"></script>

<!-- The element below is where your animation renders -->
<dotlottie-player
  src="https://dev.motiopix.com/files/lottie.lottie"  <!-- Insert your hosted .lottie URL here -->
  background="transparent"                             <!-- Use transparent to overlay on any background -->
  speed="1"                                            <!-- 1 = normal speed, 2 = twice as fast, 0.5 = half speed -->
  style="width: 320px; height: 320px;"                 <!-- Change width/height to resize -->
  loop                                                 <!-- Add loop to repeat forever; remove it to play once -->
  autoplay                                             <!-- Add autoplay to start immediately; remove to start paused -->
></dotlottie-player>

How autoplay and loop work

autoplay means the animation starts playing automatically as soon as it loads.
loop means the animation repeats forever. If you remove loop, it will play once and stop on the last frame.
If you remove autoplay, the animation will load but stay paused until the user presses play (or you trigger it with code).

How speed works

speed is a multiplier.
speed="1" plays at normal speed.
speed="2" plays twice as fast.
speed="0.5" plays half as fast.

Responsive sizing example

This keeps the animation responsive and square, scaling to the available width up to 420px.


<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.js"></script>

<div style="max-width:420px;width:100%;">
  <dotlottie-player
    src="https://dev.motiopix.com/files/lottie.lottie"  <!-- Insert your hosted .lottie URL here -->
    background="transparent"
    speed="1"
    style="width:100%;aspect-ratio:1/1;"                <!-- Responsive square -->
    loop
    autoplay
  ></dotlottie-player>
</div>

Optional: basic play and pause buttons

If you want a simple “Play” and “Pause” UI, you can assign an id to the player and control it from JavaScript.

See the Pen Embed .lottie in HTML play +pause by Motio Pix (@motiopix) on CodePen.


<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.js"></script>

<dotlottie-player
  id="mp-player"
  src="https://dev.motiopix.com/files/lottie.lottie"  <!-- Insert your hosted .lottie URL here -->
  background="transparent"
  speed="1"
  style="width: 300px; height: 300px;"
></dotlottie-player>

<div style="margin-top:10px;display:flex;gap:10px; width: 300px; justify-content: center;">
  <button type="button" id="mp-play">Play</button>
  <button type="button" id="mp-pause">Pause</button>
</div>

<script>
  // Grab the player element
  var player = document.getElementById('mp-player');

  // Start playing when user clicks Play
  document.getElementById('mp-play').addEventListener('click', function () {
    // Some versions use player.play(), others accept play() via the custom element API
    if (player && player.play) player.play();
  });

  // Pause when user clicks Pause
  document.getElementById('mp-pause').addEventListener('click', function () {
    if (player && player.pause) player.pause();
  });
</script>

Common issues and fixes

If nothing shows, confirm the .lottie URL is public and returns a 200 response in the browser.
If the animation area is blank, make sure the player element has a visible size (width/height or a parent with size).
If you use a strict Content Security Policy, you may need to allow scripts from unpkg.com for the player script.

Performance tip

Looping animations are fine, but avoid having many looping players running at once on the same page. Pause animations that are off-screen to keep pages smooth.

Was this article helpful?

0 out of 0 found this helpful