Video Box Widget Tutorial

Elementor Video Box widget by Premium Addons for Elementor is a FREE widget that lets you add videos to your Elementor website. You can show videos from YouTube, Vimeo, Dailymotion, or hosted videos from your WordPress media library. You can use it to show YouTube channel/playlist videos with tons of customization options.

Requirements:

• You will need the 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

Video Box Settings

• Video Type: Here is where you can select the video type. You can choose from:
  • YouTube
  • Vimeo
  • Dailymotion
  • Self Hosted

YouTube:

• Get Videos From Channel/Playlist: Enable this option to pull videos from a YouTube playlist or channel.
  • Source: Select the source of the videos, playlist, or channel.
    • Playlist ID: Insert the playlist ID, you can get it from this link.
    • Channel ID: Insert the channel ID, you can get it from this link.
  • Reload Video Once Every: Choose between Hour, Day, Week, Month, or Year.
  • Show Video Title.
  • Link Title To Videos.
  • Title HTML Tag: It can be a heading, span, or paragraph.
  • Title Position: Set the title position to top or bottom.
  • Layout
    • Video Height (%)
    • First Column Width
  • 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 take the full width of the section. (Available on Layout 1 only)
• Privacy Mode: When turned on, YouTube won’t store information about visitors on your website unless they play the video.

Vimeo:

• Controls Color: Change the control color that match 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.

Dailymotion:

• Show Logo: Enable to show the Dailymotion logo on videos.
• Video Info: Enable to show Dailymotion info on videos.
• Controls Color: Set controls color that matches your needs.

Self Hosted:

• URL: Select the video from the media library.
• Remote Video URL: Get the video from a remote website.
• Download Button: Enable/ Disable download button to allow visitors to download the video.

General Settings

The below options are available for all video 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, otherwise the video will start once the video is loaded.
• Loop: This option will loop YouTube videos.

• Sticky: Set the video at a fixed position.
• Sticky Only After Played.
• Position: Select the video position while scrolling.
• Disable Sticky On: Determine which device you would like to disable the sticky option on.
• Entrance Animation: Select entrance animations that 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 ends.
• Aspect Ratio: Select the aspect ratio for the video.
• Overlay: Add overlay image.
• Thumbnail Size: Select the thumbnail quality. (Available when the Get Videos From Channel/Playlist option is enabled)
• Hover Effect: Apply on hover effect when hovering on the video image.

• Mask Video Shape: Enable it to add a 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.

• Lightbox: Enable to show Elementor video in lightbox.
• Lightbox Style: Select video lightbox style Elementor or PrettyPhoto.
  • Lightbox Theme: Select the PrettyPhoto lightbox theme:
    • Default.
    • Light Rounded
    • Dark Rounded
    • Light Square
    • Dark Square
    • Facebook

Overlay

The overlay options tab is available if the 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.

Play Icon

• Play Icon: 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.

Description

• Video Text: Enable or disable the video text.
• Horizontal Position (%): Drag the slider to the left or to the right to adjust the text’s horizontal position.
• Vertical Position (%): Drag the slider to the left or to the right to adjust the text’s vertical position.

Background Image

• Horizontal Position (%): Set the horizontal position of the background image.
• Vertical Position (%): Set the horizontal position of the background image.
• Video Height (%): Adjust the video height.

Styles

• Video Box
• Play Icon
• Video Text
• Video Title (Available when the Get Videos From Channel/Playlist option is enabled)
• Lightbox

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
• Border Radius: Set the border radius using pixels, %, or em. The higher the number, the more circular corners.
• Advanced Border Radius: Apply custom radius values. Get the radius value from here.
• 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

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.

• Border Type: You can select from the following border types to apply them to the play icon:
  • None
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• Border Radius: Set the border radius using pixels, %, or em. The higher the number, the more circular corners.
• Padding: The padding around the icon is 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 Padding: Select the padding around the icon that will be used when the user hovers over the icon.

Video Description

• 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, or 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 is 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:
  • Color
  • Horizontal position
  • Vertical position
  • Blur
  • Spread
  • Position: Outline or Inset

Video Title

• Alignment: Align the text to the left, center, or right.
• 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, or none.
  • Adjust the line height.
  • Adjust the letter spacing.
• Color: Change the color of the text.
• Background Color: Select a background color behind the video text.
• Text Shadow: The text shadow option adds a shadow to the text itself. Select the shadow color as well as:
  • Color
  • Blur
  • Horizontal position
  • Vertical position
• Box Shadow: The box shadow option adds a shadow to the box. Select the shadow color as well as:
  • Color
  • Horizontal position
  • Vertical position
  • Blur
  • Spread
  • Position: Outline or Inset
• Border Type.
• Border Radius.
• Padding.
• Margin.

Lightbox

• Background Color: Pick a background color for the lightbox.
• 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 the video position in the lightbox to the center or top.
• Entrance Animation: Add an entrance animation for the popup.

That’s All

If you still need any further assistance, feel free to contact the Premium Addons support team. We would be more than glad to help 😁

Join the Community

You’re most welcome to join our channels to get updates about new features, improvements, and bug fixes.