Video Box Widget Tutorial

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

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.
Embed YouTube Playlist in Elementor Video Box widget
Embed YouTube Playlist in Elementor

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 video once it appear on viewport, otherwise the video will start once the video 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 ration for video.
  • Overlay: Add overlay image.
  • Thumbnail Size: Select the thumbnail quality.
  • Hover Effect: Apply on hover effect when hovering on the video image.
Elementor Video Box Widget General Options in Elementor Panel
Premium Video Box Wiget Options

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.
On Left Side Elementor Video Box Widget Sticky Options in Elementor Panel and On Right Side Elementor Sticky Video to Right Bottom
Sticky Elementor Video Box Widget

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.
On Left Side Elementor Video Box Widget Mask Option in Elementor Panel and On Right Side Mask Shape Applied to Elementor Video
Mask Option for Elementor Video Box Widget

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
      • Facebook
On Left Side LightBox Options in Video Widget for Elementor Page Builder and On Right Side YouTube Video Opened in LightBox
Lightbox Options for Elementor Video Box widget

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.

On Left Side Overlay Options for Elementor Video Widget in Elementor Panel and On Right Side Image Overlay Elementor Video
Elementor Video Box Overly Options

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.
Play Icon Options in Elementor Video Box Widget
Elementor Video Box Play Icon Options

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.
On Left Side Description Options for Elementor Video Box Widget in Elementor Panel and On Right Side Video with Description
Elementor Video Box Description Options

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 Box Style Options in Elementor Editor Panel
Elementor Video Box Style Options
Elementor Video Box Widget with Shadow Effect Around it
Example video with box-shadow

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 position along the gradient.

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 Box Widget Play Icon Style Options in Elementor Editor Panel
Style Play Icon for Elementor Video Box Widget
Elementor Video Box Widget Semi Transparent Play Icon Background
A semi-transparent Play Icon background can be colored to match the video

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 Box Widget Video Text Style in Elementor Editor Panel
Style Video Text for Elementor Video Box Widget

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.
LightBox Style in Video Box widget for Elementor Page Builder
Elementor Video Box Widget Lightbox Style Options

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.

Related Docs:

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 25+ Elementor Widgets Totally Free of charge.

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.