Configuration Options

This page documents all available configuration options for the VIDTREO Player component.

Required Attributes

video-id

Type: string (required)

The ID of the video to play.

<vidtreo-player video-id="dfc591f2-158e-4f83-885f-6fe34452ce11" />

api-key

Type: string (required)

Your VIDTREO API key for authentication.

<vidtreo-player api-key="vt_live_xxxxxxxxxxxx" />

Optional Attributes

backend-url

Type: string
Default: "https://core.vidtreo.com"

Custom API endpoint URL. Useful for proxying requests or using a custom backend.

<vidtreo-player backend-url="https://your-proxy.com/api" />

theme-color

Type: string
Default: "#00ff00"

Player theme color. Supports hex colors and rgb/rgba values.

<vidtreo-player theme-color="#ff6b6b" />
<vidtreo-player theme-color="rgb(52, 152, 219)" />
<vidtreo-player theme-color="rgba(52, 152, 219, 0.8)" />

Control Features

screenshot

Type: boolean
Default: false

Enable screenshot button to capture the current video frame.

<vidtreo-player screenshot />

setting

Type: boolean
Default: false

Enable settings panel button. When enabled, automatically includes playback rate, aspect ratio, and flip controls.

<vidtreo-player setting />

pip

Type: boolean
Default: false

Enable picture-in-picture button.

<vidtreo-player pip />

fullscreen-web

Type: boolean
Default: false

Enable web fullscreen button (expands player to fill browser window).

<vidtreo-player fullscreen-web />

fullscreen

Type: boolean
Default: false

Enable fullscreen button (uses native browser fullscreen API).

<vidtreo-player fullscreen />

Settings Panel Options

These options are only relevant when setting is enabled.

playback-rate

Type: boolean
Default: true (when setting is enabled)

Enable playback speed control in settings panel (0.5x, 0.75x, 1x, 1.25x, 1.5x, 2x).

<vidtreo-player setting playback-rate="false" />

aspect-ratio

Type: boolean
Default: true (when setting is enabled)

Enable aspect ratio control in settings panel (Default, 4:3, 16:9).

<vidtreo-player setting aspect-ratio="false" />

flip

Type: boolean
Default: true (when setting is enabled)

Enable video flip control in settings panel (horizontal, vertical).

<vidtreo-player setting flip="false" />

Boolean Attribute Behavior

Boolean attributes work as follows:

• Present without value or with any value except "false" = enabled
• Not present or set to "false" = disabled

<!-- Enabled -->
<vidtreo-player screenshot />
<vidtreo-player screenshot="true" />
<vidtreo-player screenshot="1" />

<!-- Disabled -->
<vidtreo-player />
<vidtreo-player screenshot="false" />

Default Configuration

Here's the complete default configuration:

<vidtreo-player
  video-id="required"
  api-key="required"
  backend-url="https://core.vidtreo.com"
  theme-color="#00ff00"
  screenshot="false"
  setting="false"
  pip="false"
  fullscreen-web="false"
  fullscreen="false"
  playback-rate="true"
  aspect-ratio="true"
  flip="true"
/>

Complete Example

<vidtreo-player
  video-id="dfc591f2-158e-4f83-885f-6fe34452ce11"
  api-key="vt_live_xxxxxxxxxxxx"
  theme-color="#3b82f6"
  screenshot
  setting
  pip
  fullscreen-web
  fullscreen
/>

Next Steps

• Events Reference — Handle player events
• Customization — Styling and theming
• API Reference — Complete API docs