Premium Video Box widget lets you add videos to your website. You can select a video from Youtube or Vimeo, Dailymotion, or upload and host your own in the WordPress media library. The widget can also mute and loop the video. If you select a Youtube video, you can choose to show related videos.
In addition, you can enable or disable the play icon, add an overlay image that is shown before the video starts playing, and a video text.
Click here to check Premium Video Box Widget demo.
Requirements:
- You will need Premium Addons free plugin installed and activated on your website.
- Also, make sure that this widget/feature/addon is enabled so you can find it in the Elementor editor
- Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
Key Features
- Video Box
- Overlay
- Play Icon
- Description
- Background Image
Elementor Video Box General Settings
Here is where you can select the video type. You can choose from:
- YouTube
- Vimeo
- Dailymotion
- Self Hosted
YouTube:
Select YouTube from the drop-down list, and paste video URL into the link field. Also, you could pull videos from any playlist or channel, rather than create a widget for every video separately. Also, You select the source of the related videos that will be shown after the video.
Show YouTube Channel/Playlist in Elementor Page
- Get Videos From Channel/Playlist: Enable this option to pull videos from Youtube playlist or channel.
- Source: Select the source of the videos, playlist or channel.
- Playlist ID: Insert the playlist ID, you could get it from this link.
- Channel ID: Insert the channel ID, you could get it from this link.
- Videos/Row: Select how many videos to show in one row.
- Number of Videos: Set a number of videos to retrieve.
- Featured The First Video: Make the first video takes the full width of the section.
- Mute: This option will play the video with no sound.
- Suggested Videos From: Determine the source of suggested videos after the video end.
- Privacy Mode: When turned on, YouTube won’t store information about visitors on your website unless they play the video.
- Video Height (%): Set the video height.
General Settings for Elementor Video Box Widget
Below options are available for all videos types:
- Link: Insert video link.
- Player Controls: Show/hide player controls.
- Mute: This option will play video with no sound.
- Autoplay: Enable/ Disable autoplay YouTube videos.
- Autoplay On Viewport: Enable it to start the video once it appears on the viewport (the visible area of your webpage), otherwise the video will start once the video is loaded.
- Loop: This option will loop YouTube video.
- Start Time: Specify a start time (in seconds).
- End Time: Specify an end time (in seconds).
- Suggested Videos From: Determine the source of suggested videos after the video end.
- Aspect Ratio: Select the aspect ratio for video.
- Overlay: Add overlay image.
- Thumbnail Size: Select the thumbnail quality.
- Hover Effect: Apply on hover effect when hovering on the video image.
Show YouTube Video in Elementor Page Builder
Select YouTube from the drop-down list, then paste video URL into the link field.
- Privacy Mode: When turned on, YouTube won’t store information about visitors on your website unless they play the video.
- Suggested Videos From: Determine the source of suggested videos after the video end.
Show Vimeo Video in Elementor Page Builder
Select Vimeo from the drop-down list, then paste video URL into the link field.
- Controls Color: Change controls color that matches your needs.
- Intro Title: Enable/Disable Vimeo video title.
- Intro Portrait: Enable/Disable Vimeo video owner’s image.
- Intro Byline: Enable/Disable Vimeo video byline.
Show Dailymotion Video in Elementor Page Builder
Recently, we have added an option to insert Dailymotion video in Premium Video box widget. Select Dailymotion from the drop-down list, then paste the video URL into the link field.
- Show Logo: Enable to show Dailymotion logo on videos.
- Video Info: Enable to show Dailymotion info on videos.
- Controls Color: Set controls color that matches your needs.
Upload Local Video in Elementor Page Builder
Select Self Hosted from the drop-down list, and then click the + button to access the WordPress Media Library. You can now select from existing videos or upload a new video.
- URL: Select the video from the media library.
- Remote Video URL: Get the video from remote website.
- Download Button: Enable/ Disable download button to allow visitors to download the video.
How to Add Sticky Video in Elementor Video Box widget?
- Sticky: Set the video at fixed position.
- Position: Select the video position while scrolling.
- Disable Sticky On: Determine which device you would like to disable the sticky option on it.
- Entrance Animation: Select entrance animations which will be used.
- Animation Duration: Select between normal, fast and slow.
- Animation Delay: Set animation delay by entering the number of seconds.
- Info Section: Enable/Disable Info section under the sticky video.
- Text: Info section text box.
Elementor Video Mask Options
The mask option is now included in Elementor Video Box Free Widget to create remarkable sections.
- Mask Video Shape: Enable it to add mask shape overly the video.
- Mask Image: Select the mask image and must be PNG.
- Mask Size: Select mask image size.
- Mask Position: Select the mask position for the video.
- Mask Shadow: Add shadow to the mask and customize it to match your needs.
How to Open Videos in Lightbox in Elementor?
Since Premium Addons for Elementor version 4.9.1, we have extended Premium Video Box widget with the option to use Elementor or Prettyphoto lightbox.
- Lightbox: Enable to show Elementor video in lightbox.
- Lightbox Style: Select video lightbox style Elementor or PrettyPhoto.
- Lightbox Theme: Select PrettyPhoto ligthbox theme:
- Default.
- Light Rounded
- Dark Rounded
- Light Square
- Dark Square
- Lightbox Theme: Select PrettyPhoto ligthbox theme:
Add Overlay in Elementor Video Box Widget
Overlay options tab is available if Overlay control switcher above is enabled. With this option, you can add an image that will be displayed on top of the video until the video is clicked to play it.
To add an image, click the + button to access WordPress Media Library. You can now select from existing images, or upload a new image.
Play Icon in Elementor Video Box widget
The play icon is enabled and centered by default.
- Play Icon Switcher: Lets you enable or disable the icon.
- Horizontal Position (%): Drag the slider to the left or to the right to adjust the icon’s horizontal position.
- Vertical Position (%): Drag the slider to the left or to the right to adjust the icon’s vertical position.
Elementor Video Box Description
The video text is a description that shows before the video plays.
- Video Text Switcher: Lets you enable or disable the video text.
- Horizontal Position (%): Drag the slider to the left or to the right to adjust the text horizontal position.
Vertical Position (%): Drag the slider to the left or to the right to adjust the text vertical position.
Elementor Video Box Background Image
This option allows you to display video within a device frame.
- Horizontal Position (%): Set the horizontal position of the background image.
- Vertical Position (%): Set the horizontal position of the background image.
- Video Height (%): Adjust video height.
Styles
In the Style tab, you will be able to customize your Video Box the way you want, to make it match and fit your needs.
Elementor Video Box Style
Border Type
Select between the following border types, as well as the border color and the width of the border on each side of the widget.
- None
- Solid
- Double
- Dotted
- Dashed
- Groove
The border radius can be declared using pixels, % or em. The higher the number, the more circular corners.
Box Shadow
You can add a shadow around the widget with this option. Select the color and the following settings:
- Horizontal position
- Vertical position
- Blur
- Spread
- Position: Outline or Inset
Elementor Video Play Icon Style
- Color: Select the color of the icon.
- Hover
Color : Select the color of the icon that is visible when the user hovers over the icon. - Size: Select the icon size in pixels, %, or em. Select a number between 0 and 100.
Background Type
Select between an image, solid color, or color gradients. When selecting an image, you can choose among the following settings:
- Position:
- Default
- Top Left
- Top Center
- Top Right
- Center Left
- Center Center
- Center Right
- Bottom Left
- Bottom Center
- Bottom Right
- Custom: -Select the X and Y positions in pixels, %, em or vw.
- Attachment
- Default
- Scroll
- Fixed
- Repeat
- Default
- No-repeat
- Repeat
- Repeat-x
- Repeat-y
- Size
- Default
- Auto
- Cover
- Contain
- Custom
Color gradients: Select a primary and secondary color and the colors
Select between a linear and radial gradient. For the linear gradient, you can select the angle. For the radial gradient, you can choose between the following positions:
- Center Center
- Center Left
- Center Right
- Top Center
- Top Left
- Top Right
- Bottom Left
- Bottom Center
- Bottom Right
Borders
You can select from the following border types to apply them to the play icon: None
- Solid
- Double
- Dotted
- Dashed
- Groove
The border radius can be declared using pixels, % or em. The higher the number, the more circular corners.
The padding around the icon be declared using pixels, % or em. You can change the padding on all sides, or individually. The default value is 40. Increasing the padding will make the background around the icon larger.
Hover
- Hover Animation -Enable or disable the hover animation. Hover animation works only when you have set a background color or image for the play icon.
- Hover Padding -Select the padding around the icon that will be used when the user hovers over the icon.
Elementor Video Text Style
Color
- Text Color -Change the color of the text.
- Hover Color Change the color of the text that is displayed when the user hovers over it.
Typography
In the Typography settings you can:
- Select from a large number of font families.
- Select the font size in either pixels, em, rem or vw.
- Select the font weight: From 100 (thin) to 900 (very thick), default, normal or bold.
- Transform the text to: Uppercase, lowercase, capitalized, default or normal.
- Select a font style: Normal, italic or oblique.
- Select a text decoration: Default, underline, overline, line through, none.
- Adjust the line height.
- Adjust the letter spacing.
Background
- Color -Select a background color behind the video text.
- Padding -The padding around the icon be declared using pixels, % or em. You can change the padding on all sides, or individually. Increasing the padding increases the size of the background behind the text.
Shadow
The shadow option adds a shadow to the text itself. Select the shadow color as well as:
- Horizontal position
- Vertical position
- Blur
- Spread
- Position: Outline or Inset
Elementor Video Lightbox Style
- Background Color: Pick a background color for lightbox background.
- UI Color: Set close icon color.
- UI Hover Color: Pick a color for close icon color on hover.
- Content Width: Set lightbox popup width.
- Content Position: Align video position in the lightbox to center or top.
- Entrance Animation: Add an entrance animation for the popup.
If you still need any further assistance, feel free to contact Premium Addons support team from here. We would be more than glad to help 😁
Join the Community
You’re most welcome to join our Facebook group and YoutTube channel to get updates about new features, improvements, and bug fixes.
