Video, Audio and Lottie Animation widget settings

Three Media widgets for things that move or play: Video for a watchable video, Audio for a track or podcast, and Lottie Animation for a small looping animation such as an animated icon. For using a client's own uploaded videos (and video backgrounds), see How to use a client's video on a site.

Spacing and the Animations & Effects section work the same on every widget. They're explained once in Widget Design panel basics and Animations and effects.

Video

How to add it

1. Click Add in the left rail and open the Media category.
2. Drag Video onto the page. It shows "Click to add video" until you pick one.
3. Select it and click Manage Video on its toolbar (or Choose video in its Design panel). The Video Content window opens.

The Video Content window

• Client videos: only on a site that belongs to a client. It opens on this tab when the client has videos. Pick one once it shows Ready.
• Upload: drop or pick a video file. MP4, WebM or OGV, up to 50 MB. A poster picture is made from the video when it's processed.
• Library: videos already uploaded to this site. Empty says "No videos uploaded yet for this site."
• Paste a link: paste a YouTube, Vimeo, DailyMotion or direct .mp4 link, click Check, then Use this video. A line under the box says what it found, for example "Detected: YouTube". For a private Vimeo video, paste the full share link including the last part.

This same window opens from every place in the editor that takes a video: the Video widget, Video Gallery items (including the Showcase hero), Scroll Video, Expanding Media, section and column background videos, custom widget video fields and CMS Video fields. Each of those shows the chosen video as a small picture with its name ("YouTube video", "Client video" or the file name) and Replace / Remove, or a Choose video button when there's none.

Playback

• Video: the chosen video with Replace (opens the Video Content window) and Remove, or Choose video when there's none.
• Link the video: turn on to make the whole video one big link. Default off. Pick where it goes with the link picker: a page, a web address (with an option to open in a new tab), a popup, a spot on a page, an email, a phone number, a file and more. Visitors can click anywhere on the video to follow the link. The panel says "Linked videos play without controls; clicking opens the link." While it's on:
  • Uploaded and client videos play on their own, muted, on a loop, with no controls. A visitor who has asked their device for less motion sees the poster instead.
  • YouTube, Vimeo and DailyMotion videos show their picture (your Poster image if you set one, otherwise the video's own thumbnail) and the player doesn't load. Clicking follows the link instead of playing.
  • Autoplay, Muted, Controls, Loop and When the video ends are hidden. They come back as you left them when you turn the link off.
• Aspect ratio: 16:9, 4:3 or 1:1. Default 16:9. Can differ per screen size.
• Autoplay: starts playing on its own. Default off. Can differ per screen size, so you can autoplay on Desktop and leave phones tap-to-play. An uploaded video always plays muted when it autoplays, because browsers only autoplay silent video. An autoplaying video doesn't show its poster first: the space shows the video's first frame (or the page behind it) until it starts. If it can't start on its own, because the visitor has asked their device for less motion or the browser blocked it (for example a phone in low-power mode), the poster shows with a play button instead.
• Muted: starts with the sound off. Default on.
• Controls: shows play, pause, volume and the timeline. Default on.
• Loop: starts again at the end. Default off.
• When the video ends: what an uploaded or client video does when it finishes. Only shows when Loop is off. YouTube, Vimeo and DailyMotion players decide this themselves.
  • Hold last frame (default): stays on its final picture. It stops a split second before the very end, because many exported clips finish on a few black frames that would make it look blank.
  • Show poster: the poster image comes back, with a play button to watch again. With no poster set, it goes back to the first frame instead.
  • Restart (show first frame): goes back to the start and waits there.
• Poster image: the picture shown before the video plays. With Autoplay on, it's only shown if the video can't autoplay, or at the end with Show poster. Click Set to pick one; the small × removes it. Uploaded and client videos fill this in for you.

Alignment

• Horizontal: Left, Center or Right inside the column. Default Left. Per screen size. Only shows a difference when the video is narrower than the column.

Size

• Width: 0–2000 px, 0–100 %, or auto (the full width of the column or row it's in). Default auto. Per screen size. A new video is always visible on auto, whatever the column's alignment, and in a row, an Advanced Grid cell or a Free Layout box. A px width never goes past the edge of its column, so a wide desktop size still fits a phone.
• Height: 0–2000 px or auto (worked out from the aspect ratio). Default auto. Per screen size.
• While a size is auto, the box shows the video's current size. Switching to px starts from that size (or 640 × 360 if the video isn't on the page), and % from its share of the column. It never starts at 0.

You can also drag the video's handles on the page to resize it.

Spacing

• Padding: space inside the widget, per screen size, with a reset. The outer ring is the margin. See Widget Design panel basics.

Animations & Effects

Video has Hover effects, Entrance and Scroll. See Animations and effects.

Connect to Data

Under More > Connect to Data, the video can follow a collection field: Connect Video to (a video field) and Connect Poster image to (an image field). Use this on a dynamic page so each entry shows its own video. See Connect to Data.

The cookie banner

When the site has a cookie banner, YouTube, Vimeo and DailyMotion videos wait until the visitor allows marketing cookies. Until then the video shows a Load content button that loads just that one video. Videos you uploaded, and client videos, play straight away because they set no cookies.

Audio

How to add it

1. Open Add > Media and drag Audio onto the page.
2. Click Select Audio on its toolbar. The Audio window opens.
3. Either click Select Audio file to upload a file or link to one, or paste a link in SoundCloud or Mixcloud URL.
4. Fill in Track title (for screen readers). Picking a file fills it in from the file name.
5. Click Save.

The Audio window

• Select Audio file: opens Choose a file with Upload (MP3, M4A, AAC, WAV or OGG, up to 50 MB) or Link to a file. Uploaded files are public: anyone with the link can download them. Click Use file.
• SoundCloud or Mixcloud URL: a SoundCloud track or playlist, or a Mixcloud show. The line under the box tells you what it found ("SoundCloud track or playlist.", "Mixcloud show.", "Audio file."). Links must start with https://.
• Track title (for screen readers): the name a screen reader announces for the player.

Style

The options change with the kind of audio.

• Layout (SoundCloud only): Classic (a slim bar) or Visual (large artwork). Default Classic.
• Play button color (SoundCloud only): color of the play button and waveform. Default orange.
• Layout (Mixcloud only): Mini, Classic or Picture. Default Classic.
• Color scheme (Mixcloud only): Light or Dark. Default Light.
• Show artwork (Mixcloud only): shows the show's picture. Default on.
• Width (0 = fill the column): 0–1200 px. Default 0. Per screen size. The player fills the column or row it's in up to this width, so it shows in a row of widgets too.
• Alignment: Left, Center or Right. Default Center. Per screen size.

An uploaded file plays in the visitor's browser player, so only width and alignment apply.

Spacing and Animations & Effects

Margin only, plus Entrance and Scroll animations.

SoundCloud and Mixcloud players also wait for marketing cookies when the site has a cookie banner, with a Load content button.

Lottie Animation

A Lottie animation is a small animation file (JSON) that stays sharp at any size and loads fast. You need a link to a hosted Lottie JSON file: most free animation libraries give you one when you choose the Lottie JSON format. Free animations often ask you to credit the creator.

How to add it

1. Open Add > Media and drag Lottie Animation onto the page.
2. Click Manage Animation on its toolbar.
3. Paste the link in Lottie animation URL (it looks like https://…/animation.json).
4. Choose Loop animation (plays over and over; the default) or Animate on click (plays once each time it's clicked).
5. Optional: write a Description (for screen readers). Leave it blank if the animation is only decoration.
6. Optional: click + Add link to make the animation a link (a page, section, URL, phone and so on, through the link picker). Remove link takes it off.
7. Click Save.

Size

• Width (0 = fill the column): 0–1200 px. Default 300. Per screen size. The animation fills the column or row it's in up to this width, so it shows in a row of widgets too.
• Alignment: Left, Center or Right. Default Center. Per screen size.
• Speed: 0.25× to 3×, in steps of 0.25. Default 1×.

Spacing and Animations & Effects

Margin only, plus Entrance and Scroll animations.

Examples

• A plumber's "how we work" video: a Video from YouTube, 16:9, Muted and Controls on, with a poster of the van so the page looks finished before anyone presses play.
• A gym's hero teaser: an uploaded MP4 with Autoplay and Loop on for Desktop, Autoplay off on Mobile, Controls off.
• A remodeler's project reel: an uploaded clip with Link the video on, pointing at the Gallery page, so the moving picture works like a big button.
• A church's sermon archive: an Audio widget on a dynamic page per sermon, pointing at each SoundCloud track, Visual layout.
• A cleaning company's sparkle icon: a Lottie Animation 120 px wide, Center, linked to the booking page.

Limits and what it can't do

• Video uploads: MP4, WebM or OGV only, 50 MB each. For longer or bigger videos, use the client's own videos (they're optimized for the web) or YouTube/Vimeo.
• The Video widget holds one video. For several videos, use a Video Gallery.
• Muted, Controls and Loop are the same on every screen size; only Autoplay, Aspect ratio, Width, Height, Padding and Alignment can differ.
• Audio uploads: MP3, M4A, AAC, WAV or OGG, 50 MB each. Only SoundCloud and Mixcloud links get their own player style options.
• Lottie needs a link to a hosted .json file. You can't upload a Lottie file, and .lottie files don't play.
• Audio and Lottie Animation can't be connected to data.
• Clients with only Widget content can change the video, track or animation, but not the Design panel.

Who can use it

Anyone in your agency with the Mount Olympus tool. Client people need Editor to add, move, design or delete these widgets, or Widget content to change what's in them. Connect to Data needs Editor or Dynamic pages & Connect to Data.

Troubleshooting

• The video is smaller or bigger than expected: check Width and Height under Size on the screen size you're looking at. auto fills the column or row the video is in.
• "Please select a video file (.mp4, .webm, .ogv).": the file isn't a video. Convert it to MP4 and try again.
• "File too large (max 50 MB).": compress the video, upload it as a client video, or put it on YouTube or Vimeo and use the Paste a link tab.
• "Enter a valid YouTube, Vimeo, DailyMotion or direct video link.": the link isn't one the widget can play. Copy the link from the video's own page or share button.
• A private Vimeo video won't play: paste the full share link, including the part after the video number.
• Clicking a linked video in the editor doesn't open its link: that's on purpose. In the editor a click selects the widget. Use Preview or the live site to try the link.
• My linked YouTube video won't play: that's on purpose. A linked video shows its picture and a click follows the link. Turn Link the video off to get the player back.
• The linked video's controls are gone: linked videos play without controls, so the click can go to the link. Turn the link off to get them back.
• Autoplay isn't working: turn Muted on. Most browsers block video with sound from starting on its own. Also check Autoplay on the screen size you're looking at.
• Visitors see a "Load content" button instead of the video or player: that's the cookie banner holding back a YouTube, Vimeo, DailyMotion, SoundCloud or Mixcloud embed until the visitor allows marketing cookies. Upload the video instead if it must always show.
• The Audio window's Save button is grayed out: the link isn't a SoundCloud, Mixcloud or https:// audio link.
• "That audio URL can't be played — use an https link.": the saved link starts with http:// or isn't a link. Paste the https:// version.
• "The URL must start with https://" on a Lottie: use the secure link.
• "This is a .lottie file", or a message that you pasted the animation's page rather than the animation file: you copied the wrong link. Open the animation, choose the Lottie JSON format, and copy that link.
• "This animation couldn't be loaded — check that the URL is a public Lottie JSON file.": the file is private, moved or not a Lottie file. Open the link in a new tab to check.