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:

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

Refer to the GIF below:

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: 👇🏼

Video Options

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

- Upload
- Embed

Check out the screenshot below to see visual:

Upload:

You can upload a video in the following formats:

- MP4
- WEBM

Refer to the screenshot below:




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


Refer to the GIF below:

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:

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:

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:




✅ *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:

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.




Check the below documentations to learn more about it:

- Styles
- Advanced

Related articles

Advanced tab in Editor

Styles tab in Editor

Updated on: 05/06/2024