# Video Element

{% tabs %}
{% tab title="Content Tab" %}

## <mark style="color:green;">Add Video</mark>

🎞 **Add Video**\
You can upload or link a video to display inside your app.\
Supported video sources include direct uploads or online URLs (e.g., YouTube, Vimeo, or hosted file links).

#### 🧩 **How to Add a Video Element**

1. Navigate to the **Native Screen** where you want to add the video.
2. Click the **Add Element (+)** button.
3. From the element list, select **Video**.
4. A new video block will appear on the screen layout.
   {% endtab %}

{% tab title="Settings Tab" %}

## <mark style="color:green;">Customize Appearance</mark>

After adding the element, you can configure the following settings:

| Setting          | Description                                                            |
| ---------------- | ---------------------------------------------------------------------- |
| **Video Source** | Upload a video file or paste a video URL                               |
| **Autoplay**     | Toggle ON to start video playback automatically when the screen loads. |
| **Repeat**       | Toggle ON if you want the video to repeat automatically.               |
| **Mute**         | Toggle ON to start playback without sound.                             |
| **Controls**     | Enable or disable visible playback controls (Play, Pause, Seek).       |

> 💡 **Tip:** Use short, lightweight videos (under 15MB) for faster loading and smoother performance.

#### 🎨 **Video Design**

* **Corner Radius:** Round video corners for a modern look.
* **Margin :** Adjust spacing between the video and other elements.

#### 👁️ **Visibility**

* **Platform:** Android and/or iOS
* **Device:** Mobile or Tablet
* **User Type:** Non-Logged in, Logged-in, or All
  {% endtab %}
  {% endtabs %}

#### ✅ **Use Case Examples**

* **Welcome Screen:** Show an intro or brand animation.
* **Tutorial Section:** Embed how-to videos.
* **Promotional Page:** Play looping product highlights.

## <mark style="color:green;">📱 How It Looks</mark>

Below are example of how the video appears in the app:

> ![](/files/yBWGDomTOxwzaIJ33cdq)


---

# 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://help.twinr.dev/native-screen/video-element.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.