Video Box Block Tutorial


Premium Video Box Block for Gutenberg is an excellent way for you to share videos from leading video sharing websites, such as DailyMotion, YouTube, Vimeo and more.

Gutenberg Video Box Block is easy to use as it does not involve coding, and is super user-friendly to add videos. Follow this tutorial page to understand more about this Video Box Block for Gutenberg, and download it for free from here.

Key Features

  • Video
  • Box Style
  • Advanced

1. Video Options

The most important element for any Premium Video Box Block for Gutenberg, is the ability to add a video to your blog without any coding efforts. To do this, you need to first specify your Video Type by selecting the right video platform, such as YouTube, DailyMotion, Vimeo or Self Hosted. Then enter the URL, which is usually the video ID, and not the entire URL, after which you finally Enable/Disable the following options:

  • Autoplay
  • Loop
  • Mute
  • Player Controls
  • Show Related Videos
  • Overlay Image
The options under Video tab that you can customize

2. Box Style Options

What's the point of embedding a video on your Wordpress Blog without the ability to customize styling options?

Now that you have embedded the video in the Video Box Block for Gutenberg, you can make it stand out for your audience by customizing styling options, such as:


Border Type

You can change the Border Type by selecting your preferred option from the following:

  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove

Or you can choose “None” if you don’t want to add a border to your Video Box Block.

Border Radius

To alter Border Radius, simply adjust the slider anywhere from 0 to 150 (maximum value). This gives viewers a nice and appealing look to enjoy the video.

The Border type can be selected from the drop-down menu as shown in the above screenshot.

Box Shadow

Shadow Color

Box Shadow settings in Premium Video Box Block for Gutenberg gives you an ability to add realistic looking shadows. To adjust these settings, simply select the shadow color underneath Shadow Color options.

Then, you can adjust sliders for the following to achieve the desired 3D look:

  • Horizontal
  • Vertical
  • Blur

To change the position of the shadow, simply select from the drop down menu for the most preferred option:

  • Inset
  • Outline
By adjusting the sliders, you can achieve your desired shadow looks.

Related Docs: