# Video Property

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F7TeFQ0Ys5998ILkOfvTU%2Fezgif.com-video-to-gif.gif?alt=media&#x26;token=bba661f4-2b67-4608-8880-efb6ac762940" alt=""><figcaption></figcaption></figure>

The Video Property allows you to add a Video to a component, to name it, to set a Default video, to choose an URL and choose a simple (static) or advanced (static and dynamic) type.

* Open the Components Properties modal by clicking the "+" icon in the Block Inspector.
* Select the Video Property you wish to configure.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FQhh4h81hjAN3r9scp2gt%2FScreenshot%202023-09-23%20at%2011.46.45.png?alt=media&#x26;token=edbd9d40-1847-4bbc-82b8-eb9b11c02d45" alt=""><figcaption></figcaption></figure>

## Connect&#x20;

The Video Property needs to be connected for it to be applied to the canvas.

{% hint style="info" %}
You need to select "Modify" in the Toolbar or Block Inspector for the blocks that make up a particular component to be visible.
{% endhint %}

* Select the Component to which you want to connect the Video Property.
* Select "Modify" in the toolbar or the Block Inspector.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fv60N657Pl4rReOD8CYGe%2FScreenshot%202023-09-23%20at%2011.51.08.png?alt=media&#x26;token=c6380b58-2ca7-4f6d-a1e4-2712096a5619" alt=""><figcaption></figcaption></figure>

This will open the component in the navigator so you can access the required block.

* Select required block.
* In the Block Inspector, find the Video Property and click the Component logo.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fy8DoJoeiHNJH8vixdDDl%2FScreenshot%202023-09-23%20at%2011.53.17.png?alt=media&#x26;token=e2f28114-40f9-4eff-a3a8-8a74b2674f67" alt=""><figcaption></figcaption></figure>

* Choose required block in the Source dropdown.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FXXkjOCz8yDDUrigHx7b4%2FScreenshot%202023-09-23%20at%2012.03.30.png?alt=media&#x26;token=32c8c741-8390-49bb-8931-98d4a1b137b4" alt=""><figcaption></figcaption></figure>

The Video Property will now become green.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FKv586rq3b2e48vo5GtYd%2FScreenshot%202023-09-23%20at%2012.06.24.png?alt=media&#x26;token=147772f2-fc5e-48ec-af63-653985d77c91" alt=""><figcaption></figcaption></figure>

If the Link property is correctly connected, you should see something like this when in "Customise".

* Click Video panel to open the Media modal or input a suitable URL.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F8DhQdQUeQzlGPZ4mpX0v%2FScreenshot%202023-09-23%20at%2012.08.37.png?alt=media&#x26;token=527d0282-f128-470f-a8e4-e4388adab462" alt=""><figcaption></figcaption></figure>

* Select required Video and click "Select".

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FXwN1hbkfHzIaf8OrTKMV%2FScreenshot%202023-09-23%20at%2012.09.41.png?alt=media&#x26;token=a9eeec4d-1bcb-4052-8e91-40c823c5514b" alt=""><figcaption></figcaption></figure>

* The selected Video is now visible in the Video field of the Block Inspector.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FT9A3R1qmVKwfEkYBwTNp%2FScreenshot%202023-09-23%20at%2012.12.01.png?alt=media&#x26;token=1afe5864-7b7c-4d8b-a6c2-f46bb1fe49f3" alt=""><figcaption></figcaption></figure>

## Name

The Name property allows yo to input a suitable name for your Video property.

* Input a suitable name such as "Video".

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F3yuET6sxErDpFF7l31wv%2FScreenshot%202023-09-23%20at%2012.12.56.png?alt=media&#x26;token=d648bd19-92f4-4733-9743-c2d971158dbf" alt=""><figcaption></figcaption></figure>

Once connected, the chosen name will now be visible in the Block Inspector.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FPC7TlTmTny4tnfd7IMgK%2FScreenshot%202023-09-23%20at%2012.14.13.png?alt=media&#x26;token=caefa8c7-f634-4feb-9d1f-daa50a649c69" alt=""><figcaption></figcaption></figure>

## Default

Allows you to set a suitable default video to your component.

* Open the Components Properties.
* Select required Video property.
* Open Settings tab.
* Click "Set Default Video" field or input URL.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FFEUxarP0Yj07RDdTnV1a%2FScreenshot%202023-09-23%20at%2012.15.19.png?alt=media&#x26;token=0d22c0be-f596-4595-9a45-1abca0ecb23a" alt=""><figcaption></figcaption></figure>

* Select a suitable video.
* Click Select.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FR5hfdQ0ZZD7kXaKGK9MV%2FScreenshot%202023-09-24%20at%2011.41.31.png?alt=media&#x26;token=62371b86-e2b4-42bf-a23f-2db7edefc441" alt=""><figcaption></figcaption></figure>

Once selected, you should be able to visualise the selected default video in the component Properties modal.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F0Xau9Jz3k58BhcVjC8nG%2FScreenshot%202023-09-24%20at%2011.42.39.png?alt=media\&token=fd7cd94e-f9f7-4e4f-bdc2-b0cd5ac03192)

The video will appear by default on the canvas.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F9KgzJtSw1fGNRN4r0bnp%2FScreenshot%202023-09-24%20at%2011.44.17.png?alt=media&#x26;token=4619df48-fdb8-48b3-9967-c74fcd65539a" alt=""><figcaption></figcaption></figure>

## Simple Type

The Simple Type property means that your Video property is static.

* Open the Components Properties.
* Select required Video property.
* Open Settings tab.
* Select Simple as Type.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FFosTQqwrPy3xVtfliUsG%2FScreenshot%202023-09-24%20at%2011.47.01.png?alt=media&#x26;token=9d67f044-0b33-4bf9-a379-2b82cb50bccd" alt=""><figcaption></figcaption></figure>

You will now be able to upload a static video.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FGYmvUTXWqDQ5IuT6ViB1%2FScreenshot%202023-09-24%20at%2012.05.10.png?alt=media&#x26;token=4b0ae5a2-74e0-47da-bfcd-20776513bf8b" alt=""><figcaption></figcaption></figure>

## Advanced Type

The Advanced Type property allows you to add dynamic or static content to your video field as required.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fs7xYZqjhqbO6X3ybKTqJ%2FScreenshot%202023-09-23%20at%2012.15.19.png?alt=media&#x26;token=d4945aa1-069c-46f7-a8b4-263596f67d62" alt=""><figcaption></figcaption></figure>

* Open the Components Properties modal.
* Select required Text property.
* Open Settings tab.
* Select Advanced as Type.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F71Gk4oIrU2oiMKhuTtRz%2FScreenshot%202023-09-24%20at%2012.06.11.png?alt=media&#x26;token=f6e2df3f-325b-4e6f-b7f9-85aff4863ec0" alt=""><figcaption></figcaption></figure>

A Dynamic icon is now visible in the Block Inspector that will allow you to toggle on/off Dynamic content.

* In the Block Inspector, toggle dynamic on for dynamic content.
* This will open the Dynamic Video modal.
* Input settings as required.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FkmRXqaIjl5jYtJcF1l0Z%2FScreenshot%202023-09-24%20at%2012.08.24.png?alt=media&#x26;token=daef31e7-a441-40f6-bc68-6d1c5f5b42c8" alt=""><figcaption></figcaption></figure>
