1. Home
  2. Docs
  3. Content Elements
  4. Video Box

Video Box EA Element

Video Box EA element is a unique element that gives you the ability to add playable videos to your page with no coding required. It also has many customization options. Here in this tutorial, you’re going to learn how to use the Video Box element into Elementor Page Builder. So let’s get straight into it:

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Video Box Element

 

»Content

 

Video Box

⇒Video-Type: Select the video type for the video box. You can select Youtube, Vimeo or self-hosted video type.

⇒Link: Add a video URL or link for the video. Or upload your self-hosted video and add the remote video URL.

⇒Player Controls: Show/hide player controls.

⇒Mute: Enable mute will play the video muted.

⇒Loop: Enable/disable looping of the video.

⇒Start Time: Set the starting time in seconds from where your video will start playing on the page.

⇒End Time: Set the end time in seconds where your video will stop playing.

⇒Suggested Videos From:  Set the suggested video source.

⇒Aspect Ratio: Set the aspect ratio of the video on the screen.

⇒Overlay: Enable/disable the overlay. If disabled, you can select the t

 

Overlay

⇒Image: If you enable the overlay, then select an image from here for the overlay image.

 

Play Icon

⇒Play Icon: Enable/Disable the play icon for the video.

⇒Horizontal Position (%): Set the horizontal position of the play icon.

⇒Vertical Position (%): Set the vertical position of the play icon.

 

Description

⇒Video Text: Enable the video text and add text on the play icon.

⇒Text: Add text on the video play button.

⇒Vertical Position (%): Set the vertical position of the play description.

⇒Horizontal Position (%): Set the horizontal position of the play description.

 


»Style

 

Video Box

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the video box for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the video box border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the video box for different dimensions.

⇒Shadow: Customize the shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 

Play Icon

⇒Color: Add a custom color to the play icon.

⇒Hover Color: Add a custom color to the play icon on hover.

⇒Size: Set the play icon size.

⇒Background Type: Set the background type either Classic or Gradient for the play icon. And then customize the style according to your preference.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the play icon of the video for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the video play icon border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the video play icon for different dimensions.

⇒Padding: Set the padding value for the top, right, bottom and left around the video play icon for different dimensions. You can link the values together or customize them individually.

⇒Hover Animation: Enable hover animation. Hover animation works only when you set a background color or image for play icon

⇒Hover Padding: Set the hover padding value for the top, right, bottom and left around the play icon for different dimensions. You can link the values together or customize them individually.

 

Video Text

⇒Text Color: Add a custom color to the video text for normal mode.

⇒Hover Color: Add a custom color to the video text for hover mode.

⇒Typography: Set the typography options for the video text.

⇒Background Color: Add a custom background color to the video text for both normal and hover mode.

⇒Padding: Set the padding value for the top, right, bottom and left around the video text for different dimensions. You can link the values together or customize them individually.

⇒Shadow: Customize the shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Video Box Element.


Was this article helpful to you? Yes No

How can we help?