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

The options under the video type change with the type you pick. The playback, sticky, overlay and mask options near the end of the section apply whichever type you picked. The lightbox options are the exception, and the notes below say where they differ.

Link: Insert the video link. This option shows for Vimeo, Dailymotion, and for YouTube when you are showing a single video.

Video Type, playlist switcher and Link options in the Elementor panel — Video Type and Link

YouTube:

Get Videos From Channel/Playlist: Enable this option to pull videos from a YouTube playlist or channel. It needs a YouTube Data API key, which you can set up from this guide.
- 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: How long the fetched videos are cached before the widget asks YouTube again. Choose between Hour, Day, Week, Month, or Year. The default is Day, which keeps you well inside the Google API quota.
- Show Video Title: Show the title of each video with its thumbnail.
- Link Title To Videos: Turn each title into a link to its video.
- Title HTML Tag: It can be a heading, span, or paragraph. The default is H4.
- Title Position: Set the title position to Top or Bottom.
- Layout: Layout 1 puts the videos in a grid. Layout 2 splits the box into a large player on one side and a list of the remaining videos on the other.
- Video Height (%): Adjust the height of each video in the grid. Available on Layout 1 only.
- First Column Width: Set how much of the width the player takes, leaving the rest for the list. Available on Layout 2 only.
- Videos/Row: Select how many videos to show in one row, from 1 to 6. The default is 2 on desktop and tablet, and 1 on mobile.
- Number of Videos: Set a number of videos to retrieve. The default is 6.
- Feature The First Video: Make the first video take the full width of the row. Available on Layout 1 only.
- Thumbnail Size: Select the thumbnail quality, from Maximum Resolution down to Standard Quality.
Captions: Load the video’s captions when it starts. Available when Player Controls is enabled.
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 ends, either the current channel or any channel.

Playlist mode replaces the single player, so a few options leave the panel while it is on: Link, Player Controls, Autoplay, Loop, Sticky, and Overlay. Turn the option off and they come back.

Get Videos From Channel/Playlist, Source, Playlist ID and Reload options in the Elementor panel — Pulling videos from a playlist or a channel

Show Video Title, Link Title To Videos, Title HTML Tag and Title Position options in the Elementor panel — Video title options in playlist mode

Layout, Video Height, Videos per Row, Number of Videos and Feature The First Video options in the Elementor panel — Playlist layout options

Thumbnail Size and Hover Effect options in the Elementor panel — Thumbnail Size in playlist mode

Embed YouTube Playlist in Elementor Video Box widget — Embed YouTube Playlist in Elementor

Vimeo:

Controls Color: Change the control color to match your needs.
Intro Title: Show or hide the Vimeo video title.
Intro Portrait: Show or hide the Vimeo video owner’s image.
Intro Byline: Show or hide the 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: Show a download button so visitors can save the video.
Preload: How much of the video the browser fetches before playback. Metadata loads the duration and dimensions only, Auto lets the browser fetch the whole file, and None waits until the visitor presses play. The default is Metadata. This option is hidden while Autoplay is on and Autoplay On Viewport is off, because the video has to load either way.
Poster: A still image the browser shows before the video plays. Available when the Overlay option is disabled, since the overlay image already covers the player.
Object Fit: How the video fills its container. Contain, the default, fits the whole frame inside the box. Cover crops it to fill the box, Fill stretches it, and Default leaves the browser to decide.

Autoplay, Autoplay On Viewport and Restart Video on Scroll Up options in the Elementor panel — Autoplay options for a self hosted video

Download Button, Preload and Poster options for a self hosted video in the Elementor panel — Download Button, Preload and Poster

Aspect Ratio and Object Fit options for a self hosted video in the Elementor panel — Aspect Ratio and Object Fit

General Settings

The options below are available for all video types.

Player Controls: Show or hide the player controls.
Mute: This option will play the video with no sound.
Play Inline: Play the video where it sits instead of opening the device’s own player. This applies to touch devices, which open videos in a popup by default.
Autoplay: Start the video without waiting for a click. Autoplay only works when the Overlay option is disabled, and Chrome applies Google’s autoplay policy, which usually means the video also has to be muted.
Autoplay On Viewport: Start the video once it scrolls into view rather than as soon as the page loads.
Restart Video on Scroll Up: Play the video from the beginning each time it scrolls back into view. Available for Self Hosted videos with Autoplay and Autoplay On Viewport both enabled.
Loop: Replay the video when it ends.
Start Time: Specify a start time in seconds. Not available for Vimeo.
End Time: Specify an end time in seconds. Not available for Vimeo or Dailymotion.
Aspect Ratio: Select the aspect ratio for the video: 16:9, 21:9, 4:3, 3:2, 1:1, or 9:16. Sticky Options reads this value when it works out the height of the floating player.

End Time, Suggested Videos From and Aspect Ratio options in the Elementor panel — End Time, Suggested Videos From and Aspect Ratio

Sticky:

Sticky: Detach the video into a small floating player when the visitor scrolls past it. See How To Create Sticky Video In Elementor for a full walkthrough.
Sticky Only After Played: Only float the video once the visitor has started it.
Position: Select the corner or edge the floating player sits in. The left and right choices mirror themselves on RTL sites.
Disable Sticky On: Determine which device you would like to disable the sticky option on. You can pick more than one.
Entrance Animation: Select the animation the floating player appears with.
Animation Duration: Select between Slow, Normal, and Fast.
Animation Delay (s): Set animation delay by entering the number of seconds.
Info Section: Show a bar under the floating video.
Text: The text in that bar.

Entrance Animation, Animation Duration, Animation Delay, Info Section and Text options in the Elementor panel — Sticky entrance animation and Info Section

Overlay and hover:

Overlay: Show an image on top of the video until the visitor clicks to play it. The image itself is set in the Overlay section.
Thumbnail Size: Select the thumbnail quality for YouTube videos. It appears when the Overlay option is disabled, or when Get Videos From Channel/Playlist is enabled.
Hover Effect: Apply an effect to the overlay image on hover. Choose from None, which is the default, Zoom In, Zoom Out, Scale, Grayscale, Blur, Bright, Sepia, or Translate.

Overlay switcher and Hover Effect options in the Elementor panel — The Overlay switcher and Hover Effect

Mask:

Mask Video Shape: Crop the video to the shape of an image you supply.
Mask Image: Select the mask image. Use a PNG with the shape you want to mask around the video.
Mask Size: Contain fits the whole shape inside the box. Cover scales the shape until it fills the box.
Mask Position: Where the shape sits. Contain offers three positions, Cover offers nine.
Mask Shadow: Add a shadow that follows the masked shape. The popover holds Color, Horizontal, Vertical, and Blur.

Lightbox:

Lightbox: Play the video in a popup instead of in place. This option is unavailable while Autoplay or Sticky is enabled.
Lightbox Style: Select the video lightbox style, Elementor Lightbox or PrettyPhoto. This option is not available for Dailymotion videos.
Lightbox Theme: Select the theme the PrettyPhoto lightbox uses. It also appears for Dailymotion videos, whichever lightbox style is set:
- Default
- Light Rounded
- Dark Rounded
- Light Square
- Dark Square
- Facebook

Overlay

This section is available when the Overlay switcher in the Video Box section is enabled. The image you choose here sits on top of the video until the video is clicked to play it.

Image: Choose an image for the video box.

Overlay section of the Elementor Video Box widget in the Elementor panel — The Overlay section

Play Icon

Play Icon: Enable or disable the icon.
Horizontal Position: Move the icon across the video. The slider takes px, em, or %, and starts at 50%.
Vertical Position: Move the icon up and down the video. Also px, em, or %, starting at 50%.
Glow Effect Type: Add an animated glow behind the icon. Ripple pulses outward from the icon, and Radio Wave sends a single expanding ring. The default is None.

Description

Video Text: Enable or disable the video text.
Text: The text shown over the video. It reads Play Video until you change it.
Horizontal Position: Move the text across the video, in px, em, or %.
Vertical Position: Move the text up and down the video, in px, em, or %.

Background Image

Use this section to sit the video inside a larger image, such as a laptop or phone frame. The three position options stay hidden until an image is set, and the whole section is hidden while YouTube playlist mode is on.

Select Image: Choose the image the video sits inside.
Horizontal Position: Set the horizontal position of the video within the image.
Vertical Position: Set the vertical position of the video within the image.
Video Height: Adjust the height of the video within the image.

Background Image section of the Elementor Video Box widget in the Elementor panel — The Background Image section

Add Elementor Video Box within device frame — Elementor Videobox Background Image Option

Styles

Video Box
Play Icon
Video Description
Sticky Options
Video Title (Available when Get Videos From Channel/Playlist and Show Video Title are both 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 radius of each corner separately, in px, %, or em.
Advanced Border Radius: Apply custom radius values instead of the four corner control. Get the radius value from here.
Shadow: Add a shadow around the video. Select the color and the following settings:
- Horizontal position
- Vertical position
- Blur
- Spread
- Position: Outline or Inset
Rows Spacing: Vertical space between rows of videos. Available when Get Videos From Channel/Playlist is enabled.
Columns Spacing: Horizontal space between videos in the same row. Available when Get Videos From Channel/Playlist is enabled.

With Sticky and Mask Video Shape both enabled, the shadow lands on the sticky overlay image only. The widget shows a note about this in the panel.

Video Box style options in the Elementor panel — Video Box style options

Rows Spacing and Columns Spacing options in the Video Box style section — Rows Spacing and Columns Spacing appear in playlist mode

Elementor Video Box Widget with Shadow Effect Around it — *Example video with box-shadow*

Play Icon

Size: Select the icon size in px, %, or em. The default is 30px.
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.
Glow Color: The color of the glow behind the icon. Available when Glow Effect Type is not None.
Glow Size (px): How far the ripple spreads. Available for the Ripple effect.
Radio Wave Size: How far the wave expands, from 0.5 to 5. Available for the Radio Wave effect.
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 px, %, or em. The default of 100px gives you a circle.
Padding: The padding around the icon, declared in px, %, or em. You can change the padding on all sides, or individually. The default is 20. 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.

Elementor Video Box Widget Semi Transparent Play Icon Background — *A semi-transparent Play Icon background can be colored to match the video*

Video Description

This section is available when Video Text in the Description section is enabled.

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: Set the font family, size, weight, transform, style, decoration, line height, and letter spacing.
Background Color: Select a background color behind the video text.
Padding: The padding around the text, in px, %, or em. Increasing the padding increases the size of the background behind the text.
Shadow: A text shadow on the description itself. Select the color, then:
- Blur
- Horizontal position
- Vertical position

Video Description style options in the Elementor panel — Video Description style options

Sticky Options

This section is available when the Sticky option is enabled.

Video Size: The width of the floating player. Its height follows the Aspect Ratio you picked in the Video Box section. The default is 320px, and 250px on mobile.
Spaces Around: The gap between the floating player and the edges of the screen. Only the sides that match the sticky Position are used.
Box Shadow: A shadow on the floating player. Available when Info Section is disabled.
Shadow Color: Replaces Box Shadow when Info Section is enabled.
Play Icon
- Size: The size of the play icon inside the floating player.
- Padding: The padding around it. The default is 40px.
Video Text Size: The size of the description text inside the floating player. Available when Video Text is enabled.
Close Icon
- Color: The color of the close icon.
- Background Color: The color behind it, white by default.
- Size: The size of the icon, 15px by default.
Info Section, all three available when Info Section is enabled:
- Text Color: The color of the info bar text.
- Typography: The font settings for that text.
- Background Color: The color of the bar, white by default.

Video Size, Spaces Around and Shadow Color options for the sticky player in the Elementor panel — Size and spacing of the floating player

Play icon size and padding and Video Text Size options for the sticky player in the Elementor panel — Play icon and text size inside the floating player

Close icon color, background color and size options for the sticky player in the Elementor panel — Close icon styling

Info Section text color, typography and background color options in the Elementor panel — Info Section styling

Video Title

This section is available when Get Videos From Channel/Playlist and Show Video Title are both enabled.

Alignment: Align the text to the left, center, or right.
Typography: Set the font family, size, weight, transform, style, decoration, line height, and letter spacing.
Color: Change the color of the text.
Background Color: Select a background color behind the title.
Text Shadow: A shadow on the title text. Select the color as well as:
- Blur
- Horizontal position
- Vertical position
Box Shadow: A shadow on the title box. Select the color as well as:
- Horizontal position
- Vertical position
- Blur
- Spread
- Position: Outline or Inset
Border Type.
Border Radius.
Padding.
Margin.

Video Title style options in the Elementor panel — Video Title style options

Lightbox

This section is available when Lightbox is enabled and Lightbox Style is set to Elementor 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, from 30% upward. It applies on desktop.
Content Position: Align the video position in the lightbox to the center or top.
Entrance Animation: Add an entrance animation for the popup.

Lightbox style options in the Elementor panel — Lightbox style options