Updated: July 19th, 2026 for FolioBlocks Version 1.4 running on WordPress 7.0 or higher
Note: This article focuses on the Professional (Pro) version of FolioBlocks. Some of the features described here may not be available in the free version.
Video is one of the most effective ways to engage visitors and showcase your work online. Whether you’re displaying a showreel, promotional video, tutorial, interview, or product demonstration, the Video Block allows you to present videos in a polished and professional way.
In this tutorial, we’ll walk through how to add a Video Block to your website and customize it using the powerful features included with FolioBlocks.
Table of Contents
Why Use the Video Block?
The Video Block is the foundation of the FolioBlocks Video Gallery Block.
Every video displayed inside a Video Gallery uses the same Video Block technology behind the scenes. This ensures a consistent editing experience while allowing you to use the same thumbnails, hover effects, Lightbox options, styling controls, and video presentation features whether you’re displaying a single video or an entire gallery.
While WordPress includes basic video support, the FolioBlocks Video Block provides significantly more control over presentation and visitor interaction. It’s ideal for filmmakers, videographers, agencies, educators, and content creators.
Adding the Video Block
Open the page or post where you’d like to display your video.
Click the Add Block (+) button and search for Video Block.
Insert the block into your page.
Select a Thumbnail
Once the block has been added into the editor you are invited choose a thumbnail image. Click on the “Select Thumbnail” button to select a thumbnail from you WordPress Media Library.
Add a Video
Once you have added your thumbnail you are invited to add a video and given the options to Upload a video into your WordPress Media library, select an existing video in your WordPress Media library, or insert a video from a URL.
When inserting videos from a URL the Video Block supports videos from these sources:
- YouTube
- Vimeo
- Bunny.net Stream
- Self Hosted MP4 Files
Block Toolbar
The Video Block toolbar gives you access to Alignment Controls allowing you switch between Content, Wide, or Full-Width, and it has a button to change the image.
Understanding the Video Block Panels
The FolioBlocks Video Block organizes its controls into three panels within the WordPress Block Editor: Content, Settings, and Styles. Each panel groups together related options, making it easy to find the controls you’re looking for.
Content Panel
The Content panel contains information about the video itself.
Your selected thumbnail is visible and there is an option to change the image.
After that there is a section where you can edit the Video URL.
Then there are sections where you can edit the Video Title and Description. These fields are used in overlays and inside the Lightbox of the Video Block.
Settings Panel
The Settings panel contains options that control how the Video Block behaves on your website.
There are Video Block Settings which contain settings related to the thumbnail.
Video Click Settings which contain settings related to the Lightbox.
Video Hover Settings which contain settings related to the Overlays.
E-Commerce Settings which contain settings for linking video blocks to WooCommerce products.
Styles Panel
The Styles panel contains all visual appearance settings for the Video Block.
From here you can customize options such as borders, border radius, drop shadows, and other design-related settings that control how the Video Block is displayed on the front end of your website.
Throughout the rest of this guide, we’ll explore each of these panels in detail and explain how they work together to help you create beautiful, responsive images in the WordPress Block Editor.
Video Block Settings
With the main Video Gallery block selected you can access the block’s settings panel, the first of which contains the General Gallery Settings.
Thumbnail Resolution
Set or change the thumbnail image for each video. This is what appears in the grid before the video is played.
Thumbnail Aspect Ratio
Set or change the thumbnail image for each video. This is what appears in the grid before the video is played.
Video Click Settings
Lightbox Appearance
This setting allows you to between Light & Dark mode in the Video Lightbox.
Lightbox Content
This setting allows you to choose what is displayed in the Lightbox alongside your video. Options include:
- Video Only
- Video + Info
- Video + Product Info
Note: Video + Info is only available when Enable WooCommerce Integration is active.
Enable Lightbox in Editor
This feature allows you to open the Lightbox in the WordPress Block Editor so you can examine how it looks.
Video Hover Settings
Hover Style
The Hover Style dropdown allows to select a style for your hover overlay. You can choose from:
- Default Overlay
- Blur Overlay
- Color Overlay
Note: The Color Overlay adds an additional component to the Video Gallery Block’s styles panel that allows you to set the Background and Text color of the overlay.
Overlay Content
The Overlay Content dropdown allows you to select what is displayed inside of the Overlay when you hover over a Video thumbnail. You can select from:
- None
- Play Button
- Video Title
- Video Title + Play Button
E-Commerce Settings
Enable WooCommerce Integration
Enables WooCommerce Integration allowing you to link the Video Block with WooCommerce products on your website.
Note: Toggle for Enable WooCommerce Integration will only display if WooCommerce plugin is installed and active on your website.
Display Add To Cart icon
With Enable WooCommerce Integration turned on you will be presented with a new select control that lets you choose if you want to always display the Add To Cart button or Display it only Hover.
Note: You can set the icon & background color for the Add To Cart icon by going to the Video Block’s styles panel when Enable WooCommerce Integration is active.
Linking Videos to WooCommerce Products
The Linked WooCommerce Products input field allows you to search through the all of the WooCommerce Products on your site.
Simply search for your product and select it to link it with the video.
Note: The settings for Linked WooCommerce Products only appear when Enable WooCommerce Integration is active on the parent gallery block.
Set Add To Cart icon Behavior
The Default Add to Cart Icon Behavior select control allows you to set the default behavior of Add to Cart Icon. You can choose between the default “Add To Cart” or linking to the product page.
Video Block Styles
Border Color, Width, and Radius
Add borders around your video thumbnails to match your website’s design style. Rounded corners create a softer, modern look.
Drop Shadow
The Drop Shadow dropdown allows you to select from a variety of Drop Shadow effects and apply them to the thumbnail images in your gallery. You can select from the following types of Drop Shadow:
- None
- Subtle
- Soft
- Elevated
- Dramatic
Page/Post Settings
Starting with FolioBlocks 1.4, several controls that were previously located in the block’s Advanced settings have been moved to a dedicated FolioBlocks Page Settings panel in the Page/Post sidebar.
These features operate at the page level rather than the individual block level, so moving them out of the block settings creates a more intuitive editing experience and prevents the same feature from being enabled multiple times when a page contains several FolioBlocks blocks.
The FolioBlocks Page Settings panel is automatically added to the Page or Post sidebar whenever a FolioBlocks block is inserted into the WordPress editor. From this central location, you can configure settings that apply across the entire page, including the following features:
Password Protect Page
Requires a password before visitors can view the page.
Disable Right-Click on Page
Attempts to disable right-click to discourage casual image downloads.
Note: This makes it harder for casual users to save images, but it’s not foolproof — advanced users can still access media via the browser’s developer tools or view source.
Enable Lazy-Load of Images
When active, images load as the user scrolls, improving initial page load speed.
Example Video Block
Common Questions
What is the Video Block in FolioBlocks?
The Video Block is a WordPress block for displaying a single video with a polished, professional layout. It is designed for portfolios, video showcases, featured projects, trailers, tutorials, and other pages where one video needs to stand out.
What video sources does the Video Block support?
The Video Block supports self-hosted video files as well as external video sources such as YouTube, Vimeo, and Bunny Net. This gives you flexibility depending on where your videos are hosted.
Can I use the Video Block for portfolio pages?
Yes. The Video Block is ideal for portfolio pages where you want to feature a single video project, client work, film, animation, product demo, or behind-the-scenes clip.
Does the Video Block work with the WordPress Block Editor?
Yes. The Video Block is built for the WordPress Block Editor, also known as Gutenberg. You can add it directly to posts, pages, templates, and block-based layouts.
Can I customize how the video looks?
Yes. The Video Block includes styling controls that let you adjust the presentation of your video so it fits the design of your website.
Can videos open in a Lightbox?
Yes. The Video Block can be used with Lightbox-style viewing, allowing visitors to watch the video in a focused overlay without leaving the page.
Is the Video Block responsive?
Yes. Videos added with the Video Block are responsive and adapt to different screen sizes, including desktop, tablet, and mobile layouts.
When should I use the Video Block instead of the Video Gallery Block?
Use the Video Block when you want to showcase one specific video. Use the Video Gallery Block when you want to display multiple videos together in a gallery layout.
Get Started
Ready to build your first Video Block? Download FolioBlocks for free or upgrade to Pro for advanced features like filtering, downloads, and WooCommerce integration.
Get FolioBlocks and start creating stunning, responsive galleries in the WordPress Block Editor today.