Gutenberg Video Box Block Tutorial

Introduction

Looking to add videos to your website? Gutenberg Video Box Block from Premium Blocks is here to help. This simple tool lets you easily include videos from YouTube, Vimeo, Dailymotion ” Be sure link of video not page URL” , or even upload your own. It’s designed to be straightforward and user-friendly, so you don’t need any coding skills. We’ll walk you through each step, making sure it’s clear and easy for everyone to use.

Visit Demo Page

Free Download

Requirements

Before you start with Gutenberg Video Box Block in WordPress, make sure the required plugin is installed and turned on.

Premium Blocks for Gutenberg – The Free WordPress Plugin.
Recommended* Kemet Full-Site-Editing WordPress Theme.

How to Use Gutenberg Video Box Block?

Open your Gutenberg editor and pick a Premium Video Box Block. From there, choose the kind of video you want to use. After that, you can tweak how it looks and where it sits on your page.

General Settings

After choosing the video, you can modify its settings using the available options.

Video Type: Select the source of the video.
URL: The field for the web address where the video file is located.
Loop: When enabled, this makes the video replay from the beginning once it reaches the end.
Player Controls: This option allows the user to control the visibility of video playback controls like play, pause, and the timeline.
Mute: Enable to keep the video playing without sound.
Overlay Image: Add an image to overlay the video, which is often used before the video plays or to brand the video content.
Aspect Ratio: Allows the selection of the video frame’s aspect ratio.
Video Description: Enter a description of the video content for accessibility or SEO purposes.

Gutenberg Video Box Block Video Settings with options for video source, URL, autoplay, looping, muting, player controls, overlay image, aspect ratio, and a field for video description. — Gutenberg Video Box Block – Video Settings

Gutenberg Video Box Block Styling Controls

Video Box Style

Box Shadow: Enable or disable a shadow effect around the video box, giving it a sense of depth on the page.
Border: Apply and adjust the border of the video box. You can select the style of the border (solid, dotted, dashed, etc.) and its thickness.
Border Radius: Adjust the roundness of the corners of the video box. Values can be entered for the top, right, bottom, and left corners to customize the curvature.
Overlay: Apply an overlay effect on the video, but they are not visible in the screenshot.
CSS Filters: You can customize the video box further with CSS filters, which can alter the rendering of the video box, such as Blur, Brightness, Contrast, Saturation, or Hue.

Gutenberg Video Box Block styling panel for a video box showing options for box shadow, border style, and border radius. — Gutenberg Video Box Block – Video Box Style

Play Icon

Enable Play Icon: A toggle to turn the play icon on or off.
Size (PX): A slider and input field to adjust the size of the play icon in pixels.
Vertical Offset (%): A slider and input field to adjust the vertical position of the play icon as a percentage of the video player’s height.
Icon Color: Color selection for the play icon, with options to view the normal state and the hover state.
Background Color: Color selection for the background area of the play icon, also with normal and hover state views.
Border: Settings to customize the border of the play icon container, such as style and thickness.
Border Radius: Controls for adjusting the roundness of the corners of the play icon container.

Video Description Style

Vertical Position: A slider with input fields for adjusting the position of the video description box.
Typography: Select the font and size of the video description text.
Description Color: Color selection tool for the text color of the video description.
Background Color: Color selection tool for the background on which the video description text sits.
Text Shadow: Enable the application of a shadow effect to the description text, making it stand out more against varying backgrounds.
Padding: Adjust the space around the video description text inside its container.

Gutenberg Dual Heading Block video description options for vertical positioning, typography, text and background colors, text shadow, and padding in a web design interface — Gutenberg Video Box Block – Video Description Style

Video Caption Style

Typography: Dropdown menus for setting the font type and size.
Color: A color selection tool for the caption text.
Background Color: Select a color for the caption’s background.
Text Shadow: Enable/Disable a shadow effect for the caption text.
Padding: Adjust the space around the caption text within its container. The unit of measure can be set in pixels (PX), ems (EM), or percentages (%).

Gutenberg Video Box Block video caption styling, including typography, text color, background color, text shadow, and padding with sliders and input fields — Gutenberg Video Box Block – Video Caption Style

Need Further Help?

Have a question or need assistance? Our dedicated support team is here to help! Explore our contact options to ensure you get the support you need. We’re committed to making your Gutenberg website-building experience seamless and resolving any queries you may have.

Contact Support

Facebook Group

Gutenberg Video Box Block Tutorial

Table Of Content