Ctrlk
YouTube ChannelBook A Demo🪄 Build with AIJoin The Community
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Video Player

The Avonni Video Player component lets you embed and play videos directly within your App & Record Pages. It supports hosted file URLs, YouTube, Vimeo, and Salesforce Files, with options to control playback behavior, volume, and appearance.

Overview

Use the Video Player whenever you need to surface video content inline on a page — product demos, training clips, welcome messages, or any media tied to a record. You can connect the source dynamically so it changes based on the record in context.

For Vimeo videos, add https://vimeo.com and https://*.vimeo.com to your Salesforce Trusted URLs (Setup > Security > Trusted URLs) and enable all CSP directives. This is a Salesforce security requirement.

Configuration

To configure the Video Player, select it on the canvas. The configuration panel opens on the right. The sections below mirror the properties from top to bottom.

Properties

Title

The assistive text used to describe the video, read by screen readers. Available under advanced options.

Source

The video to display. Accepts a direct file URL (MP4, OGG, WebM), a Salesforce Content Document ID, a YouTube video ID, or a Vimeo video URL.

Autoplay

If enabled, the video starts playing automatically when the component loads. Autoplayed videos are initially muted — users must unmute manually.

Volume

Sets the initial volume level of the player (0–100). Requires: Autoplay to be disabled.

Hide Controls

If enabled, the standard player controls (play/pause, volume, fullscreen) are hidden. Useful for background videos or purely decorative media.

Loop

If enabled, the video restarts from the beginning when it reaches the end.

Playback Rate

Controls the playback speed of the video. Common values: 0.5 (half speed), 1 (normal), 2 (double speed).

Placeholder

Show Placeholder

If enabled, a placeholder is displayed when no source is set.

Placeholder Message

The message shown below the placeholder illustration when the source is empty. Requires: Show Placeholder to be enabled.

Placeholder Illustration

The illustration shown when no source is loaded. Defaults to No Preview. Requires: Show Placeholder to be enabled.

Set Component Visibility

All components support conditional visibility — see Component Visibility.

Output Variables

The Video Player exposes these output variables you can reference elsewhere on the page after the user interacts with it.

Playback State

These variables update continuously as the video plays.

Output variable
Type
What it returns

Current Time Stamp

Number

The current playback position in seconds.

Duration

Number

The total length of the loaded video in seconds.

Example: Use Current Time Stamp and Duration together to build a progress formula — for example, currentTimeStamp / duration * 100 — and display it in a text component beside the player.

Styling

Configure the Video Player's appearance from the Style tab of the Edit Video Player panel.

Controls the outer spacing around the player.

  • Top / Right / Bottom / Left: Adjust the space on each side.

Controls the inner spacing between the player's content and its border.

  • Top / Right / Bottom / Left: Adjust the inner spacing on each side.

Controls the player's dimensions.

  • Width / Height: Set fixed dimensions.

  • Min Width / Max Width / Min Height / Max Height: Constrain the size within bounds.

  • Overflow: Control how content that exceeds the bounds is handled.

Customizes the border surrounding the player.

  • Color / Size / Style / Radius: Set the border color, thickness, style, and corner rounding.

Last updated

Was this helpful?