# Video Component

## Overview

The ability to showcase videos within a mobile application enriches user experiences and enhances engagement. The video component allows your users to play, pause, rewind, or fast-forward videos that you have uploaded to your app or linked to with a URL. The videos can be stored in the [cloud](https://docs.thunkable.com/settings/assets#cloud-storage) or your project. 

## Add a Video to Your Project 

To add a video to your project:

1. Drag and drop a video component onto the screen.
2. In the video component's properties panel, click in the video input field.
3. You have two options for adding a video:\
   \
   **Upload Video File**\
   You can upload a video file as an asset in your project. If you opt for this option, be mindful of the Thunkable 50 MB app size limit.\
   \
   **Enter Video URL**\
   Enter the URL of the video you want to show in your project. The link must end in `.mp4`, `.mov`, etc., so videos uploaded to YouTube and other video-sharing sites may not work.

{% hint style="warning" %}
The video component is not recommended for streaming live video content.
{% endhint %}

## Properties

### Video

| Name  | Description                                                        | Data Type                               |
| ----- | ------------------------------------------------------------------ | --------------------------------------- |
| Video | The video users can play within your app.                          | Uploaded video file or the video's URL. |
| Play  | Toggle whether or not video file auto-plays when the screen opens. | True/False                              |

### Layout

| Property    | Description                                                                                | Data Type                                    |
| ----------- | ------------------------------------------------------------------------------------------ | -------------------------------------------- |
| X           | Location of top left corner of video component on X-axis, where the left hand side is X=0. | Number                                       |
| Y           | Location of top left corner of video component on Y-axis, where the top side is Y=0.       | Number                                       |
| Height      | Height of video component in pixels.                                                       | Number                                       |
| Width       | Width of video component in pixels.                                                        | Number                                       |
| Resize Mode | Define the dimensions of the video component.                                              | Select from list `[Stretch, Float in Place]` |

## Video Blocks

### Properties Blocks

There are two types of property blocks: dark green "set" and light green "get" blocks. The specific blocks available vary according to the UI component. 

The dark green set blocks allow you to change the component's properties using blocks. For example, if you don't want a button to be enabled for a user until they've typed a set number of characters into a text input component, you can use the button's dark green set button's disabled status block. 

The light green get blocks allow you to access the properties of a component (e.g. color, font, width, text, etc.).