Video Box Widget Tutorial

Intro

The Premium Video Box widget lets you add videos to your website. You can select a video from Youtube or Vimeo, 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/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

1. Video Box

Here is where you can select the video type. You can choose from:

  • YouTube
  • Vimeo
  • 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.

Get Video from Channel/Playlist:

  • 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.
  • 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.
  • Video Height (%): Set the video height.
  • Thumbnail Size: Select the thumbnail quality.
  • Hover Effect: Apply on hover effect when hovering on the video image.

Get YouTube Video:

  • Link: Insert video link.
  • Player Controls: Show/hide player YouTube controls.
  • Mute: This option will play the video with no sound.
  • Autoplay: Enable/ Disable Autoplay 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 the video.
  • 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.
  • 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.
  • Video Height (%): Set the video height.
  • Thumbnail Size: Select the thumbnail quality.
  • Hover Effect: Apply on hover effect when hovering on the video image.

Vimeo:

Select Vimeo from the drop-down list, then paste video URL into the link field.

Link: Insert video link.

  • Player Controls: Show/hide player Vimeo controls.
  • Mute: This option will play the video with no sound.
  • Autoplay: Enable/ Disable Autoplay 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 the video.
  • 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.
  • Controls Color: Change controls color that matches your needs.
  • Intro Title: Enable/Disable video title.
  • Intro Portrait: Enable/Disable video owner’s image.
  • Intro Byline: Enable/Disable video byline.
  • Aspect Ratio: Select the aspect ration for video.
  • Overlay: Add overlay image.
  • Video Height (%): Set the video height.
  • Hover Effect: Apply on hover effect when hovering on the video image.

Self Hosted:

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 files.
  • Remote Video URL: Get the video from remote website.
  • Player Controls: Show/hide player controls.
  • Mute: This option will play the video with no sound.
  • Autoplay: Enable/ Disable Autoplay 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 the video.
  • Download Button: Enable/ Disable download button.
  • 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.
  • Start Time: Specify a start time (in seconds).
  • End Time: Specify an end time (in seconds).
  • Aspect Ratio: Select the aspect ration for video.
  • Overlay: Add overlay image.
  • Hover Effect: Apply on hover effect when hovering on the video image.

Mask Video Group Options:

  • 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.
Elementor Video Box Options
Elementor Video Box Options

2. Overlay

This option is available if it is enabled in the Video Box overlay option above.
With this option, you can add an image that will be displayed before the video starts playing.

To add an image, click the + button to access the WordPress Media Library. You can now select from existing images, or upload a new image.

Elementor Video Box Overly Options
Elementor Video Box Overly Options

3. Play Icon

The 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 Play Icon Options
Elementor Video Box Play Icon Options

4. 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 Description Options
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.

1. Video Box

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
Elementor Video Box Style Options
Example video with box shadow

2. Play Icon

  • 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.
Style Play Icon for Elementor Video Box Widget
Style Play Icon for Elementor Video Box Widget
A semi transparent Play Icon background can be colored to match the video

3. Video Text

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

Related Docs:

Download Now it's free!

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