Updated: February 17th, 2026 for FolioBlocks Version 1.2
The Video Gallery Block in FolioBlocks lets you create modern, filterable video galleries directly inside the WordPress Block Editor (Gutenberg) — no short-codes, no settings screens, no fuss.
With full support for self-hosted, YouTube, and Vimeo videos, it’s the easiest way to showcase professional video collections in a responsive, visually engaging layout.
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.
Table of Contents
What Is the Video Gallery Block?
The Video Gallery Block makes it effortless to display multiple videos in a clean, customizable grid — complete with hover effects, category filtering, and built-in Lightbox playback.
Each video can have its own thumbnail, title, and caption, while filters let visitors browse different categories or topics without leaving the page.
Perfect for:
- Filmmakers and videographers showcasing portfolios
- Agencies or educators organizing video tutorials
- Brands displaying campaign or product videos
- Anyone wanting a stylish, filterable video gallery inside Gutenberg
How to Add the Video Gallery Block
1. Insert the Block
In the WordPress Block Editor, click the ➕ Add Block button and search for “Video Gallery.” You’ll find it under the FolioBlocks section.
Another option to add the block is to type / followed by the block name (Video Gallery) from inside the block editor.
2. Add Videos
With the block added to the editor you are prompted to add your first video.
You can Upload videos, add videos from your Media Library, or Insert from URL to embed videos from YouTube or Vimeo.
3. Add Thumbnails and Details
After inserting your video, you are prompted to set a custom thumbnail image. Thumbnails can be uploaded manually or selected from the media library.
The just like the photo gallery blocks in FolioBlocks, the Video Gallery block creates your videos as InnerBlocks. If you now look at you block structure in the List View it should look like this:
If you select the main Video Gallery block you can see options in the block toolbar to set the Width (Content, Wide, Full) as well as to + Add Videos as seen in the image bellow:
Selecting the inner Video block in the List View will instead show you the block toolbar for that Video block. There you will find options to Change Video and Change Thumbnail as seen bellow:
With the inner Video block selected you also get access to its settings panel. Here you will find settings to change the video source file, to set the a title for your video, and to set a description for your video.
The Title can be displayed when you hover over the video block. While the Description can be set to be displayed inside of the video Lightbox.
General Gallery 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.
Columns and Gaps
Set how many columns to show on Desktop, Tablet, and Mobile, and control the gap size between each video.
This ensures your gallery looks perfect across all screen sizes.
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.
Lightbox & Hover Overlay Settings
Enable Lightbox in Editor
This setting allows you to enable the video Lightbox in the WordPress editor.
Lightbox Layout
You can customize whether the Lightbox includes only the video in a full width layout or also includes the Video Title and Description in split 50/50 layout.
Note: With Enable WooCommerce Integration active additions options are added to this feature.
Title & Play Button Visibility
Set the visibility for the Video title and play button in overlays.
Hide Play Button
Lets you hide the play button in overlays.
Overlay Style
Lets you set the style of the Overlay with a default, blur, and color overlay option available.
Note: Color Overlay adds addition control to set the text and background colors.
Gallery Filter Settings
Enable Filtering
Turn on Enable Video Filtering to let users switch between categories using a clean filter bar above your video gallery.
You can add as many categories as you want (e.g., “Behind the Scenes,” “Commercials,” “Interviews”).
Assign Categories to Video Blocks
Once you have added all your categories on the main Video Gallery Block you can select the individual Video Blocks and in their block settings you will find a Filter Category drop down where you can select from your categories.
E-Commerce Settings
Enable WooCommerce Integration
Enables WooCommerce Integration allowing you to link gallery images with WooCommerce products on your website. Instructions for WooCommerce integration are included later in this tutorial.
Note: Toggle for Enable WooCommerce Integration will only display if WooCommerce plugin is installed and active on your website.
Advanced Settings
Disable Right-Click on Page
Blocks right-click functionality to discourage casual image saving.
Note: This adds a layer of protection but cannot prevent image access through browser developer tools or page source.
Enable Lazy-Load of Images
Load images only when they become visible in the gallery viewport, improving page load speed and performance.
Block General Styles
Background
Change the background color of the entire Video Gallery block.
Use a dark background to enhance contrast or a light background for a clean, minimal aesthetic.
Dimensions – Padding & Margin
Use Padding to control spacing inside the gallery container and Margin to adjust spacing around the gallery relative to nearby blocks.
This ensures perfect alignment across your layout.
Video Thumbnail 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
Add subtle shadows behind each video thumbnail for added depth and focus, especially effective against light backgrounds.
Filter Bar Styles
When Enable Video Filtering is active the Filter Bar Styles panel will be present in the Video Gallery Block’s style panel.
Font-Family, Font Size, Appearance, Line Height, Letter Spacing, Decoration, & Letter Case
When using a block based theme that uses theme.json FolioBlocks will detect available fonts and let you set the font for the Filter Bar. Additional controls allow you to set Font Size, Appearance, Line Height, Letter Spacing, Decoration, and Letter Case styles.
Active – Text Color & Active – Background Color
These two settings allow you to set the color and background color for the active term in the Filter Bar.
Inactive – Text Color & Inactive – Background Color
These two settings allow you to set the color and background color for the inactive terms in the Filter Bar.
Note: The font used in the Filter Bar for Active and Inactive terms is pulled from your theme’s body font.
WooCommerce Integration
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.
You can set the icon & background color for the Add To Cart icon by going to the Video Gallery Block’s styles panel when Enable WooCommerce Integration is active.
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 Icons for the entire gallery. You can choose between the default “Add To Cart” or linking to the product page.
This setting can be overridden on an image per image basis. Giving you the option to set one behavior for the gallery and then override it on images as needed.
Lightbox & Hover Overlay Settings for WooCommerce
With Enable WooCommerce Integration active additional settings are added in Lightbox & Hover Overlay Settings.
In the Lightbox Layout dropdown you will now have the options to show only the Video, the Video and Video Title & Description, or the Video and Product Title & Product Description.
Note: Videos in the gallery not linked to WooCommerce products gracefully fall back to displaying the Video and Video Title & Description.
Linking Videos to WooCommerce Products
Linking your videos to products is super simple, with Enable WooCommerce Integration turned on simply select one of the video blocks in your gallery and look in it’s block settings.
You will see a new setting available, Linked WooCommerce Products, with an input field that 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.
Example Video Gallery
Bellow is an example of the Video Gallery Block with Video Filtering enabled:
Common Questions
What video sources are supported?
You can use self-hosted MP4 files or embed videos from YouTube and Vimeo.
How many videos can I add?
There is no limit on how many videos you can add.
Can I mix videos from different sources?
Yes — you can mix self-hosted, YouTube, and Vimeo videos within the same gallery.
Does it work with my WordPress theme?
For the best experience it is recommended to use a block based theme. However FolioBlocks does work with classic themes provided they support wp_block_styles and the block editor.
Is it compatible with WordPress 6.x or newer?
Absolutely. All FolioBlocks are built for the WordPress Block Editor (Gutenberg) and optimized for the latest WordPress versions.
Get Started
Ready to build your first filterable video gallery? Get FolioBlocks and start creating professional video galleries in the WordPress Block Editor (Gutenberg) today.