> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/video-player.md).

# 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.

{% hint style="info" %}
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.
{% endhint %}

## 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

#### 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](/dynamic-components/core-concepts/component-visibility.md).

## 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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/video-player.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.