Articles on: Components & Elements

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:




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

Was this article helpful?

Share your feedback

Cancel

Thank you!