# Video Player

<figure><img src="/files/SuR30o26y0CaEiNx7IFh" alt=""><figcaption></figcaption></figure>

## Component properties

<table><thead><tr><th width="178">Name</th><th>Description</th></tr></thead><tbody><tr><td><strong><code>Source</code></strong></td><td>This property lets you easily select the video you want to display in the player. You can provide a direct URL to the video file (including those hosted on Vimeo), paste a YouTube Video ID, or upload your own video file.</td></tr><tr><td><strong><code>Autoplay</code></strong></td><td>If the Autoplay property is enabled, the initial video will automatically play when the player loads. However, due to browser limitations and user experience considerations, videos that autoplay are initially muted. Users can manually unmute the video using the player controls.</td></tr><tr><td><strong><code>Volume</code></strong></td><td>This property controls the video player's volume level. It accepts a number between 0 (mute) and 100 (maximum volume). This allows for better control over the audio output based on user preference or ambient noise levels.</td></tr><tr><td><strong><code>Hide Controls</code></strong></td><td>If the Hide Controls property is enabled, the player controls are hidden from view. This can provide a clean and uninterrupted viewing experience, especially for videos that are designed to autoplay and/or loop.</td></tr><tr><td><strong><code>Loop</code></strong></td><td>Enabling the Loop property will make the video replay from the beginning once it finishes. This can be particularly useful for short video clips, demo videos, or background videos.</td></tr><tr><td><strong><code>Playback rate</code></strong></td><td>The Playback Rate property determines the speed at which the video is played back. It can be set to values like 0.5 (half speed), 1 (normal speed, default), or 2 (double speed), giving users the ability to control their viewing pace.</td></tr></tbody></table>

### Vimeo Source Configuration

You must configure Salesforce to trust these domains and utilize Vimeo URLs as video sources. Follow these steps:

1. In Salesforce Setup, navigate to `Security | Trusted URL's`.
2. Add the following URLs as trusted sites:
   * `https://vimeo.com`
   * `https://*.vimeo.com`
3. Enable the ALL the CSP directives for these sites:

<figure><img src="/files/JNHsETyZ7sbvdyJg9R2l" alt=""><figcaption></figcaption></figure>

This configuration ensures that your Avonni Video Player component can securely embed and play videos from Vimeo within your Salesforce.

## Style Panel

The Avonni Video Player component has a Style Panel that lets you customize how it looks on your page. You can easily change the size and spacing of the player to make it fit perfectly within your design. Here's what you can adjust:

* **Size:** Make the video player bigger or smaller by setting the width and height.
* **Margin:** Control the space around the video player. This helps you position it exactly where you want it and create your desired visual layout.


---

# Agent Instructions: 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:

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

The question should be specific, self-contained, and written in natural language.
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.