Interactivity

Add a Button, a Hotspot or a Play and Replay placement to a video on Marina and Fleet. Compare plans on Pricing. A Button displays text and an optional icon; a Hotspot can mark a point in the picture.

Add and time items

Open a video and choose the Interactive tab. Add a Button or Hotspot, then set its position and time on the video picture and timeline. Add a Play and Replay placement to change either center button during a chosen span. Drag items and their timing handles, or use Set in and Set out at the current playhead. For Buttons and Hotspots, quick timing choices are From here to the end, Last 5 seconds and Whole video. Use snapping guides, undo and redo, and the editor's Shortcuts list when editing. Save to publish. Save is available when the document is valid and changed. If an item is invalid, the disabled Save control shows a field count beside it; select that explanation to jump to the first invalid field. An invalid item has an error dot in the item list and timeline. A Button without text appears in the timeline as “Button (no text)”.

Choose an action

A Button or Hotspot can open a link, jump to a time, pause, or tell the page through the Player API. A Button can also display text only. Link actions accept HTTPS, email and telephone destinations; turn on Pause video if playback should stop on activation. Buttons require text: “Add button text, or use a Hotspot for an invisible clickable area.” The one-click Convert to Hotspot action preserves the item’s position, timing and action. Clickable Buttons, Hotspots and Play or Replay placements show the pointer cursor across their hit area in watch, embed, in-app preview and editor Preview mode. Display-only items show the default cursor and let clicks pass through to the video. Tell the page emits the exact overlayclick event with { overlayId, label, type, action, name }. The name is the message name you set; it appears only for a Tell the page click. The other event fields identify the item, its accessible label, its Button or Hotspot type, and its action. Register a listener on the player instance:

await player.on("overlayclick", detail => {
  if (detail.action === "api_event" && detail.name === "give") {
    console.log(detail.overlayId, detail.label, detail.type, detail.name);
  }
});

The player does not run customer JavaScript inside a video. A Player API callback does not itself create an analytics event; viewer interactions are measured separately.

Set the look

Try the Primary, Outline or Label Button look presets. The Look panel places one full-width control per row under Background, Text, Border, Shadow, Icon and On hover. Choose a solid color or two-color gradient, text color and size, border color and width (0–20), radius (including a pill), shadow (none, soft or strong), and an icon. Each color control:including gradient stops, hover colors and the Hotspot marker:has an Opacity slider from 0 to 100% beside its swatch. Its hex field accepts eight-digit #RRGGBBAA; transparent remains valid and appears as 0% opacity.

Hotspots can also have an optional Look; new and existing Hotspots are fully transparent with no border by default, and show a 2px border in the workspace accent at 60% opacity on hover. Buttons and styled Hotspots share hover controls for solid or gradient background, border color and width (0–20), shadow (none, soft or strong) and (for Buttons) text color. Keyboard focus uses the hover appearance plus a visible focus ring; touch devices ignore hover. Change Text size with the fine-step slider from 0.1% to 20% of the rendered video picture height. Previously saved three-step text sizes retain their 12px, 14px and 18px appearance at the editor’s 450px picture height. Fit text to the button is off by default; turning it on shrinks text to fit. With it off, overflowing Button text clips with an ellipsis. Check readability for default and hover text. For a low-contrast default color, choose Use readable color; adjust hover colors manually if their contrast is low.

Keep items on the picture

Positions and sizes are percentages of the video picture, not the outer player. Text size, padding, border width, radius and shadow scale with the picture’s rendered height too: the same item keeps its relative look in the editor, in-app preview, small embeds, large watch pages and fullscreen. Older saved items keep their appearance at the editor’s 450px picture-height reference size; no document migration is required. With Show player buttons on, fullscreen in the editor keeps items at the same relative position and size. A video supports up to 20 Buttons and Hotspots combined and 10 Play and Replay placements. Preview a phone-sized player before publishing.

Place Play and Replay

On every plan, workspace and video settings let you choose Auto, Show or Hide independently for Play and Replay. Set each circle’s X/Y position from 0 to 100% of the picture, and its size from 8 to 40% of the shorter picture edge; an unset size uses responsive sizing. Auto hides a circle when a visible clickable item intersects it. See Customization for these defaults. On Marina and Fleet, a timed placement moves, resizes, shows or hides Play, Replay or both during its interval. Quick picks include End of video, Last 5 seconds and Whole video. If an item conflicts with a center circle, the editor prompts you to move it or dismiss the conflict; placements for the same circle cannot overlap. For each field, a host-page setAppearance override takes priority, followed by an active timed placement, the saved video setting, the workspace setting and the player default. See the Player API precedence.

Measure engagement

Interactivity analytics show reached sessions, click events, click rate, a reached-to-clicked funnel and markers on the engagement curve. Click rate divides click events, including repeat clicks, by reached sessions. Detailed analytics history follows the plan: 90 days on Harbor, 6 months on Marina, and 12 months on Fleet. Daily totals remain available for the full account history. Compare plans.

Four starting points

Give in the last 5 seconds

Add a Give Button, choose a donation link, select Last 5 seconds and turn on Pause video if viewers should stop to read the destination.

Shop on a product

Add a Hotspot over the product, give it an accessible label, show its marker and set its action to open the product link.

Jump to a chapter

Add Buttons labeled with your chapter names; set each action to Jump to and select the appropriate time.

Replay beside a Button

Show a Button at the end, then use an End of video Play and Replay placement to move Replay beside it. Check the conflict prompt and preview the result on a phone.