> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.dorik.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Video Element

# Getting Started

You can easily add or display videos on your Dorik website using the Video element. This guide explains how to insert and modify the Video element within your site. Just follow the instructions provided to get started.

---

# How to add the Video Element?

To integrate the **Video Element** into your site, follow these steps:

1. Create a section by clicking the `+ Add New Section` Button.
2. Choose a suitable **Containers**
3. In the central section, click on the plus button **`⨁`** labeled **Add Element or Container**.
4. Within the **Elements** section, choose **Video** from the options available.

**Refer to the GIF below:**

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/mainlarge_6jajtg.gif)

---

# Personalizing Your Video Element

Within the **Video Element** editor, you'll find these customizable features on the **General** Tab:

- Video Options
- Player Configuration
- Video Width & Height

To modify these settings, access the **Video** Element Editor. **Refer to the screenshot below**: 👇🏼

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_95a8i4.png)

---

## Video Options

Here, you will have 2 options to add Video. You can either:

- Upload
- Embed

**Check out the screenshot below to see visual:** 

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_15u19of.png)


### Upload:

You can upload a video in the following formats:

- MP4
- WEBM

**Refer to the screenshot below:** 

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_l9kclv.png)


| 💡 You can also add a **Poster** image to act as a preview thumbnail before clicking the **`Play` option**.


**Refer to the GIF below:**

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2023-11-28-at-93_1l0up6x.gif)



### Embed:

You can add a video to the video element by pasting the URL into the Video URL input field. 

Acceptable URL formats are:

*https://www.youtube.com/watch?v=xxxxxx*

*https://www.youtube.com/embed/xxxxxx*

*https://www.youtu.be/watch?v=xxxxxx*

*https://vimeo.com/xxxxxx*


**Refer to the GIF to see this feature visually:**

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2023-11-28-at-10_jl3dbm.gif)

---

## Player Configuration

This option allows you to configure the Video player with necessary settings like:

- **Video Controls**: It enables playback controls like pause, play, and forward.
- **Loop**: Enables continuous playback until manually paused.
- **Mute**: Plays the video without sound.
- **Autoplay**: Initiates automatic playback when a visitor enters your site.
- **Allow Fullscreen**: Enables full-screen mode for the video element.

**Check the screenshot below to navigate these options visually:**

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_53gs7m.png)


---

## Video Width and Height

This lets you set and adjust the height and width of your video player. **Refer to the screenshot below to navigate these settings**:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_vckgzz.png)


✅ ***Max Width***: Setting the maximum width of the video player

✅ ***Width***: Setting specific width of the video player

✅ ***Alignment***: Menu for aligning the video position on the container

✅ ***Min Height***: Setting the minimum height of the video player

✅ ***Height***: Setting the specific height of the video player

✅ ***Max Height***: Setting the maximum height of the video player


| 💡 Carefully choose the measurement properties. Example: px, %, em, rem. Refer to the screenshot below:


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1xst90j.png)

---

# Common customization option of the Video element

These are two other customized options available in the video element. Which are on the **Style** & **Advanced** mode. 

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/mainlarge-1_19n42jj.gif)


**Check the below documentations to learn more about it:**

- Styles
- Advanced

---

---

# Related articles


[Advanced tab in Editor](/en/article/advanced-tab-in-editor-1y2imp1/)

[Styles tab in Editor](/en/article/styles-tab-in-editor-42a53c/)