Embed Lottie Player Pro

Add Lottie animations to WordPress

Embed Lottie Player Pro extends the Lottie Player Gutenberg block for posts, pages, and widgets. The standard player accepts a .json or .dotlottie (.lottie) file URL; Pro also lets you upload either format directly. A shortcode capability is available for shortcode-compatible areas.

Set the player width and align it left, center, or right within its container. Animations can accompany landing pages, product explanations, portfolios, blogs, or documentation.

Set playback behavior

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

Connect playback to page activity

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

Style controls and captions

Control styling includes height, background color, icon colors for normal, hover, and active states, tracker color, and thumb color. Pro captions appear below the player, with options for text alignment, typography, text and background colors, padding, and margin.

Add and configure the block

1. Install and activate the Lottie Player block extension.
2. In the Gutenberg editor, add the Lottie Player block from the Widgets category.
3. Upload a supported .json or .lottie file with Pro, or enter its file URL.
4. Use the settings sidebar to configure playback, interactivity, layout, controls, and captions.
5. Publish the post or page when the player is ready.