# Video Player Code Component

If you want to play video in your app, you can use Monday Hero Video Player component.&#x20;

Here is how you can do it:

1. Right-click and select 'Create New Instance of / System / Monday Hero Video Player'

![Select Monday Hero Video Player Component](https://479678609-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MEfkN8oSQyQ4BaBzwxH-4037006485%2Fuploads%2FJw5Y1f8lkgkSPIoTaEAo%2FScreen%20Shot%202022-02-11%20at%2017.22.11.png?alt=media\&token=22e01800-a564-4eec-b97f-0fe626987d25)

2\. Select the frame you want to embed the video player component, name the component and  enter **a video URL\*.**

![Enter Required Fields](https://479678609-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MEfkN8oSQyQ4BaBzwxH-4037006485%2Fuploads%2F5GyX6jFkbVhKRDt7Ldoa%2FScreen%20Shot%202022-02-11%20at%2017.23.29.png?alt=media\&token=0a1024ee-f2e1-4f5e-952b-d81cc2f90469)

3\. Now you can download and play the video in your app.&#x20;

#### \*Video URL

In order for the video player component to work, you can add any video that streams. Here are some tools that you can use:

1. [Firebase](https://firebase.google.com/) ( Here is [how to add videos to Firebase](https://learn.mondayhero.io/design-to-swift/creating-components/broken-reference))
2. [Vimeo](https://vimeo.com) (Here is a how to add [direct links to video files](https://vimeo.zendesk.com/hc/en-us/articles/224823567-Direct-links-to-video-files))

Or any other tool that streams the video.

{% hint style="info" %}
Please note that the url should be secure, so the link should start with **https** not http.
{% endhint %}

#### Video Player on the Simulator

The video player will be embedded to the frame you select and it will work like the example below.

{% embed url="<https://drive.google.com/file/d/128to-i0-tBaYnJLgSpA7WTsDIqw83j4f/view?usp=sharing>" %}
Video Player Component
{% endembed %}
