Embed Lottie Player Pro extends the Lottie Player Gutenberg block for posts, pages, and widgets. It supports JSON (.json) and dotLottie (.lottie) animations. The standard player uses a file URL; Pro also lets you upload either format directly.

Set the player width and left, center, or right alignment to fit landing pages, product explanations, portfolios, blogs, or documentation. The add-on also works with shortcode-compatible areas.

Set playback behavior

The standard player includes autoplay, looping, visible or hidden controls, and an attached link. Pro adds hover playback, playback modes, forward or backward direction, play count, speed, and an interval between loops. When a link is attached, Pro can open it in a new tab.

Connect playback to page activity

Pro can synchronize animation with scrolling, including movement relative to the player container or with a scroll offset. Cursor options follow cursor position or horizontal movement. You can also start playback on click or when the player becomes visible.

Style controls and captions

Show or conceal player controls, then adjust their height, background, icon colors for normal, hover, and active states, tracker color, and thumb color. Pro adds a caption below the player with options for text alignment, typography, text and background colors, padding, and margin.

Add the block in WordPress

1. Install and activate the Lottie Player block plugin.
2. In the Gutenberg editor, add the Lottie Player block from the Widgets category.
3. Enter a supported animation file URL, or use Pro to upload a .json or .lottie file.
4. Adjust playback, interactivity, layout, controls, and caption options in the right-side settings sidebar.
5. Publish the post or page.