> For the complete documentation index, see [llms.txt](https://help.twinr.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.twinr.dev/native-screen/video-element.md).

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