# 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](https://docs.digia.tech/ui-building-blocks/widgets/default-properties "mention").

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