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 to 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.
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 such as Self-hosted, YouTube, Vimeo, etc…
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
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 – 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.
Gutenberg Video Box Block – Play Icon Style
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 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 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.