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.

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. You can Enable/Disable related videos that will be shown after the video.

Vimeo:

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

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.

Mute: This option will play the video with no sound.

Loop: This option will loop the video.

Overlay: Enable/Disable the video Overlay image.

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.

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.

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.

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
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.
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