Video Element

Last Updated on

The Video element allows you to display a video on your site. It allows adding videos which are either social hosted or self-hosted. For social hosted videos, it offers to add videos hosted on Youtube and Vimeo. It also offers 2 cool features that are adding an image overlay to the video and adding video in a mockup frame which has desktop and laptop shape.

Common Uses:

  • Showing videos from Youtube and Vimeo.
  • Showing videos hosted on own site.
x
Beware! This element is a part of the Raven elements. Raven is an exclusive plugin developed by Artbees which represents new useful elements to Elementor. In order to see the default Elementor Video, you need to look for it in the Elementor knowledgebase
x
Beware! Google products do not allow a video to autoplay if it’s not mute. To autoplay a video, you can either enable the mute option for the video or upload a video without any sound.

In this article


Displaying a Video Element

To add a Video element to a page:

1
Add a new page or edit an existing one.
2
Click on Edit with Elementor button.

3
From the left dashboard, search for a “Video”.

4
Drag and drop the Video element to your page.

5
A new dashboard on the left will open with the element’s settings. These are explained below.

Content

Video

SettingDescription
Video Type Sets the video type to either Social Hosted or Self Hosted.
Link Add the video link if video type selected as Youtube or Vimeo.
Upload Video – MP4 Add MP4 extension video if video type selected as Self Hosted.
Upload Video – WebM Add WebM extesion video if video type selected as Self Hosted.

Image Overlay

SettingDescription
Image Overlay Enable to add the Image overlay to the video.
Image Add the image that you want to add as an overlay to the video.
Play Icon Enable to add a play icon over the image overlay.
Icon Set the icon for the play icon.
Lightbox Enable the video to be shown in lightbox.

Device Mockup Frame

SettingDescription
Frame this video in Device Mockup Enable this option to wrap the video inside a mockup frame.
Device Type Set the value for the mockup frame shape.

Settings – If Youtube selected as the Video Type

SettingDescription
Aspect Ratio Set the aspect ratio of the video.
Autoplay Enable to autoplay the video.
Suggested Videos Shows suggested videos.
Player Control Toggles the player controls.
Player Title & Actions Toggles the title and actions of the video.
Mute Toggles the sound of the video.
Privacy Mode Enables the privacy mode for the site visitors.

Settings – If Vimeo selected as the Video Type

SettingDescription
Aspect Ratio Set the aspect ratio of the video.
Autoplay Enable to autoplay the video.
Loop Sets the video on loop.
Intro Title Toggles the video title.
Intro Portrait Sets the video in portrait mode.
Intro Byline Toggles the meta of the video like video author name.
Controls Color Control the color of the video title etc.

Settings – If Self Hosted selected as the Video Type

SettingDescription
Aspect Ratio Set the aspect ratio of the video.
Autoplay Enable to autoplay the video.
Loop Sets the video on loop.

Style

SettingDescription
Icon Color Sets the color type of the Video Play Icon which is solid or gradient.
Icon Size Sets the color of the Video Play Icon.
Icon Text Shadow Sets shadow to the Video Play Icon.

Adding a Youtube video with a laptop mockup frame

To add the video, follow the steps below:

1
Follow the steps in Displaying a Video Element section to add the video to your page.
2
Configure the settings like shown below:

Content

SettingDescription
Video Type Set this to Youtube.
Link Add the link of Youtube video.
Frame this video in Device Mockup Enable this option in the Device Mockup Frame tab.
Device Type Set it to Laptop.
3
Configure the rest of settings as you desire and publish or update the page.

Adding a self-hosted video with an image overlay and a play icon

To create the video, follow the steps below:

1
Follow the steps in Displaying a Video Element section to add the video to your page.
2
Configure the settings like shown below:

Content

SettingDescription
Video Type Self hosted.
Upload Video – MP4 Upload a video that has an MP4 extension.
Upload Video – WebM Upload a video that has a WebM extension.
Image Overlay Enable to add image overlay to the video.
Image Set the image for the overlay.
Play Icon Enable to add a play icon over the image overlay.
Icon Set the desired icon for the Play Icon.
x
Note: Please upload both MP4 and WebM extension of the video so that the video plays on vast variety of browsers and devices.

Style

SettingDescription
Color #4054b2
Size 88px
3
Configure the rest of settings as you desire and publish or update the page.

Responsive Options

You can choose to have different settings on different screen sizes for some of the Video element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.

At first you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

To learn more about it, please check this article.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket