# Video Player

The **Video Player** widget is used to play local or remote video files directly inside your app. Unlike the YouTube Player, which depends on YouTube embeds, the Video Player works with **raw video URLs** (e.g., MP4 files hosted on your server or CDN).

It is ideal when you want full control over the source of the video, don't want external branding, or are not using YouTube at all.

{% embed url="<https://youtu.be/znTundKOz6Y?si=oIm2molvLt9QHz6D>" %}

Watch this on Youtube: <https://www.youtube.com/watch?v=znTundKOz6Y>

### Core Concepts

The Video Player widget is designed for:

* Playing **custom video content** hosted on your own servers, CDN, or storage.
* Building **native-feeling media experiences** without YouTube UI or branding.
* Using videos in places where full control over the source and behavior is important (e.g., onboarding, product demos, in-app stories, training content).

Internally, the widget:

* Loads a video from the given `videoUrl`.
* Renders the player inside a rectangular area controlled by layout and `aspectRatio`.
* Applies playback behavior based on `autoPlay`, `looping`, and `showControls`.

You get a native-style video experience that blends seamlessly with your app’s UI.

### Properties

| Property       | Description                                                                                            |
| -------------- | ------------------------------------------------------------------------------------------------------ |
| `videoUrl`     | The URL of the video file to play (e.g., an MP4 file hosted on a server or CDN).                       |
| `showControls` | If true, playback controls (play, pause, seek, maybe fullscreen) will be displayed over the video.     |
| `aspectRatio`  | The aspect ratio of the video (e.g., 16/9, 4/3). Controls the width/height relationship of the player. |
| `autoPlay`     | If true, the video will start playing automatically when the player loads.                             |
| `looping`      | If true, the video will loop continuously and restart after it finishes.                               |

{% hint style="success" %}
**Performance Tip:** Use `autoPlay = true` only when the video is the main focus of the screen (e.g., hero video or onboarding). For feeds or lists, prefer manual play to avoid unnecessary data usage and distraction.
{% endhint %}

### Default Properties

The Video Player widget supports all [Default Properties](/ui-building-blocks/widgets/default-properties.md).

### Use Cases

The **Video Player** widget is used to play **local or remote video files** (MP4, etc.) directly inside your app, with controls like play/pause, seek, and fullscreen.

Use **Video Player** when you want to:

* **Show product or feature videos**
  * App/product demos
  * Feature explainers, UI walkthroughs
  * Before/after or showcase videos
* **In-app content consumption**
  * Lessons in an education app
  * Workout videos, tutorials, training modules
  * Short-form content, reels-style or landscape videos from your own CDN/storage
* **Marketing & engagement**
  * Promo clips on home/offer pages
  * Campaign stories, festival offers, launch teasers
* **User-generated or app-generated media**
  * Play videos uploaded by users (reviews, stories, posts)
  * Playback of recordings, screen captures, or generated clips


---

# 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.digia.tech/ui-building-blocks/widgets/content-display-widgets/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.