Updated On:
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.
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.
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.
Gallery Thumbnail Settings
Thumbnail Aspect Ratio
Set or change the thumbnail image for each video. This is what appears in the grid before the video is played.
Thumbnail Resolution
Set or change the thumbnail image for each video. This is what appears in the grid before the video is played.
Play Button Visibility
Overlay a play icon when hovering over video thumbnails — ideal for clearly indicating interactive elements.
Title Visibility
Edit your video’s title and caption directly from the sidebar controls.
Captions can describe the content, location, or project name.
Gallery Lightbox Settings
Disable Lightbox in Editor
This setting allows you to disable the video Lightbox in the WordPress editor to prevent it from opening as you build and work on your gallery.
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.
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.
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 filtering is enabled, you can customize how the filter buttons appear:
- Active Text Color & Background
- Inactive Text Color & Background
These inherit from your theme typography but can be overridden for a custom look.
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.
Gallery Lightbox Settings for WooCommerce
Additional settings are added in Gallery Lightbox Settings. If you Enable Lightbox 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.