The Video player widget is perfect for your products/service demonstration, presenting yourself or your company, infomercials, testimonials, demo, or whatever you need to be shown. A video can play an essential role in any marketing strategy, no matter what business you are in. Add unlimited players to your website as single tracks or playlists.
For further work, you need Elementor to be installed on your site. You can download it from wordpress.org
Open or create a page using Elementor and drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:
Content Tab
In the Content section, you can manage the basic settings of the Video player widget such as source, controls, player width, loop options, etc.
General
- Player alignment – specify the player alignment (left, center, right). You can only see the difference if the player width is less than 100%.
- Source – select the source of the video file for the player:
SELF HOSTED
Use it to upload mp4 files from your website media library.
EXTERNAL
Use it to insert links to mp4 files from third-party resources.
PLAYLIST
Use it to display videos in a playlist. When the option is enabled, a new Playlist section appears for adding video files and additional configuration.
- Disable overlay – enable/disables overlay on videos with iframe.
- Enable chapters – an option that allows you to add video chapters for better user navigation. It comes with flexible display and styling settings.
Playlist
The section for managing the video playlist and adding tracks.
- Show playlist videos – the toggle to enable/disable the display of the playlist box.
Playlist track content alignment – specify the track content alignment (left, center, right) for different devices.
Thumbnail horizontal alignment – specify the thumbnail alignment (left, center, right) for different devices. You can only see the difference if the thumbnail size is less than 100%.
ADD NEW TRACKS TO THE PLAYLIST
To add a new track to the playlist, click “Add Item” and fill in the appropriate fields. You need to add at least two videos with the source and title!
- Source – select the source of the video file for the player: Self-hosted or External.
- Video title – a text field to enter the name of the current video.
- Video description – a text area to enter the description of the current video.
- Video thumbnail – the option to load a thumbnail image from the media library.
Controls
The section allows you to add/manage/order player controls.
To add a new control, click “Add Item” and select one of the available item types: Play button, Progress bar, Duration, Current time, Volume, Next track, Previous track, Skip back, Jump forward, Speed, Fullscreen, Loop.
Each of the items has its own additional configurations.
- Keyboard support – the toggle to enable/disable keyboard player control.
- Hide volume on touch devices – the option hides volume control on touch devices.
- Click to play/pause – the toggle to enable the pause/play on click feature.
- Always show controls – the toggle to enable/disable permanent control display on the video player
- Initial volume – specify the initial volume in the video player using the slider.
Video poster
The section for adding an image as a poster to your video.
- Video poster – the option to load a poster image from the media library.
- Show poster when ended – the toggle to enable/disable the poster display at the end of the video.
- Show poster when paused – the toggle to enable/disable the poster display on the video pause.
Video
- Video height – set the video height in pixels using the slider.
- Video width – set the video height for different devices using the slider.
- Muted – the toggle to enable/disable video muting by default.
- Loop – the toggle to enable/disable playback looping.
- Always show hours – the toggle to enable/disable the hours display on the player control.
- Pause other players – the option disables the playback of other players when you turn on the current one. This option is useful when adding multiple players on the same page.
- Force live – the toggle to enable/disable the Live Broadcast message will be displayed instead of progress bar.
- Autosize – the toggle to enable resizing to media dimensions.
- Smooth hover – the toggle to enable/disable smooth behavior when hovering the progress bar.
Style tab
On the styles tab of the Video player widget, you can configure everything related to the visual style of elements: colors, typography, backgrounds, borders, and more.
Controls box
Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
NORMAL/HOVER
The element settings for different states.
Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Video container
NORMAL/HOVER
The element settings for different states.
Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Pause button/Play button/Mute button/Unmute button/Previous button/Next button/Loop button/Fullscreen button
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
NORMAL/HOVER
The element settings for different states.
Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Skip back button/Jump forward button/Speed button
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER
The element settings for different states.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Progress bar
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
NORMAL/HOVER
The element settings for different states.
- Time loaded bar– specify the color and opacity for the time load bar using the color picker.
- Time total bar – specify the color and opacity for the time total bar using the color picker.
- Time current bar – specify the color and opacity for the time current bar using the color picker.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Horizontal volume bar/Vertical volume bar
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
NORMAL/HOVER
The element settings for different states.
- Total volume bar– specify the color and opacity for the total volume bar using the color picker.
- Current volume bar – specify the color and opacity for the current volume bar using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Playlist box
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Width – specify the width of the current element for desktops, tablets, or phones using the slider.
- Height – specify the height of the current element for desktops, tablets, or phones using the slider.
NORMAL/HOVER
The element settings for different states.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Video speed selector/Video speed selector item/Playlist video
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
NORMAL/HOVER
The element settings for different states.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Playlist video image
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Object fit – select the image fit: Fill, Contain, Cover, Scale down, None.
- Width – specify the width of the current element for desktops, tablets, or phones using the slider.
- Height – specify the height of the current element for desktops, tablets, or phones using the slider.
NORMAL/HOVER
The element settings for different states.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Playlist video title/Playlist video description/Live broadcast text
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER
The element settings for different states.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Advanced Tab
The settings in the advanced tab of the Video player widget allow you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.
Save changes
Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.
