# YouTube Player

The **YouTube Player** widget embeds a YouTube video directly inside your app. It behaves like an inline YouTube player, allowing users to watch videos without leaving the screen or opening the YouTube app separately.

You can control basic playback behaviour such as autoplay, loop, and mute state.

{% embed url="<https://youtu.be/52ODn8up7co?si=7NR-nvjAdYJfOLvP>" %}

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

### Core Concepts

The YouTube Player widget is designed for:

* **Embedding YouTube-hosted content** inside your app UI.
* Avoiding context switching by keeping users inside the app.
* Reusing existing video content (tutorials, promos, explainers, ads, etc.) without uploading or encoding it again.

Internally, the widget:

1. Loads a YouTube video from the given `videoUrl`.
2. Renders the player inside a rectangular area (controlled via Layout properties).
3. Applies playback behaviour based on `autoPlay`, `loop`, and `muted`.

You get a **YouTube experience**, but inside your own screens and flows.

### Properties

| Property   | Description                                                                                                                   |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
| `videoUrl` | The URL of the YouTube video to play. This should be a valid YouTube link (e.g., `https://www.youtube.com/watch?v=VIDEO_ID`). |
| `autoPlay` | If `true`, the video will start playing automatically when the player loads.                                                  |
| `loop`     | If `true`, the video will loop continuously and restart after it finishes.                                                    |
| `muted`    | If `true`, the video will be muted by default when playback starts.                                                           |

{% hint style="success" %}
**Performance Tip:** Use `muted = true` with `autoPlay = true` when you want videos to start silently (common in modern UX patterns).
{% endhint %}

### Default Properties

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

### Use Cases

The **YouTube Player** widget lets you play **YouTube videos directly inside your app**, without sending users out to the YouTube app or browser.

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

* **Embed video content in your screens**
  * Product demos, feature walkthroughs, app tutorials
  * Brand films, ads, testimonials, launch videos
* **Educational or onboarding flows**
  * How-to videos inside a help/FAQ section
  * Onboarding lessons, course content, or training modules
* **Content & community**
  * Show your YouTube channel content inside the app
  * Play livestreams, interviews, podcasts, or event recordings
* **Marketing & engagement**
  * Embed campaign videos on offers/promotions pages
  * Use video to increase trust (reviews, case studies, success stories)


---

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