Video Gallery element from Max Addons for Bricks Builder lets you display videos in an organized, visually appealing layout. You can create a gallery using self-hosted videos, YouTube videos, Vimeo videos, YouTube playlists, or entire YouTube channels.
This element gives you full control over how videos appear, how visitors interact with them, and how the gallery behaves on your page.
Getting Started#
Before using the Video Gallery element, make sure the following tools are installed and activated on your WordPress website:
Once both tools are active, you’re ready to add the Video Gallery element to your page.
How to Add the Video Gallery Element#
Follow these steps to add the Video Gallery element to your page:
- Open a page in the Bricks Builder editor or create a new page.
- Click the element search bar inside Bricks Builder.
- Type "Video Gallery" in the search field.
- Add the Video Gallery element to your page.
- Make sure you see the MAX label in the top-left corner of the element. This confirms that you are using the Max Addons Video Gallery element.
When you select the element, you will see two main tabs:
- Content Tab
- Style Tab
Content Tab#
The Content tab is where you define what videos appear in your gallery and how they behave. It is organized into 7 sections:
- Video
- Layout
- Settings
- Filters
- Play Icon
- Content
- Video Schema
Let’s go through each section in detail.
Video#
The Video section allows you to choose where your videos come from and how they appear inside the gallery.
The Source setting has three options:
- Custom: Manually add individual videos from YouTube, Vimeo, Media Library, direct file URLs, or dynamic data.
- YouTube Playlist: Automatically pull all videos from a specific YouTube playlist using its ID.
- YouTube Channel: Automatically pull the latest videos from a YouTube channel using its channel ID.
If You Choose: Custom
When you select Custom as your source, you build your gallery manually by adding individual video items. Each video item has its own settings:
| Option | Description |
|---|---|
| Type | Choose the platform or source for each individual video. Options include: YouTube, Vimeo, Media, File URL & Dynamic Data |
| Filter Label | Assign a filter category label to each video. This allows visitors to filter the gallery by platform or topic using the Filters feature |
| Thumbnail Size | Select the size of the thumbnail image displayed for each video in the gallery. Larger sizes offer better image quality; smaller sizes load faster |
| Custom Thumbnail | By default, the element fetches the thumbnail automatically from YouTube or Vimeo. Enable this toggle to use your own custom image as the thumbnail instead |
Note: Available options may vary depending on the video Type you select.
You can also add the following metadata to each video item under their respective section:
- Title: Add a title for the video that appears under the thumbnail. Set this under the Content section of each video item.
- Description: Add a short description for the video. Set this under the Content section of each video item.
- Add Schema Data: Toggle this on under the Schema section to enable video schema markup for that specific video.
If You Choose: YouTube Playlist
This source automatically fetches and displays all videos from a specific YouTube playlist. Here is what you need to configure:
| Option | Description |
|---|---|
| YouTube Playlist ID | Enter the unique ID of your YouTube playlist. You can find this in the YouTube playlist URL (it's the value after 'list=') |
| Show Video Title | Toggle ON to display each video's title below its thumbnail in the gallery. Toggle OFF to hide titles |
| Show Video Description | Toggle ON to show a short description for each video. Toggle OFF to hide descriptions |
| Refresh Videos After | Set how often the gallery should re-fetch the playlist to pick up new videos. Options: Hour, Day, Week, Month, or Year |
If You Choose: YouTube Channel
This source automatically fetches the latest videos from a YouTube channel. Configure the following:
| Option | Description |
|---|---|
| YouTube Channel ID | Enter the unique ID of your YouTube channel. You can find this on your YouTube channel's About page or in the channel's URL |
| Number of Videos | Specify how many of the most recent videos from the channel you want to display in the gallery |
| Show Video Title | Toggle ON to display each video's title below its thumbnail. Toggle OFF to hide titles |
| Show Video Description | Toggle ON to show a description for each video. Toggle OFF to hide descriptions |
| Refresh Videos After | Set how often the gallery should check for new videos. Options: Hour, Day, Week, Month, or Year |
Layout#
The Layout section controls how your video gallery is displayed on the page. You can choose between two Grid Layout & Carousel Layout.
- Grid Layout: Displays your videos in a structured grid with rows and columns, perfect for a clean, organized gallery look.
- Carousel Layout: Displays your videos in a horizontal scrolling carousel, great for featured videos or when you want to save vertical space.
Grid Layout Options: When you select Grid, the following settings appear:
| Option | Description |
|---|---|
| Videos Per Row | Set how many videos appear side-by-side in each row. For example, set it to 3 to show a 3-column grid. |
| Spacing | Control the gap between video items in the grid. Increase this value for more breathing room between thumbnails. |
Carousel Layout Options: When you select Carousel, you get additional controls for the sliding behavior:
| Option | Description |
|---|---|
| Items to Show | How many videos are visible at one time in the carousel viewport |
| Items to Scroll | How many videos move at once when the user clicks the arrow or swipes |
| Spacing (px) | The gap in pixels between video items within the carousel |
| Loop | Toggle ON to make the carousel loop infinitely. When the last item is reached, it wraps back to the first |
| Autoplay | Toggle ON to make the carousel advance automatically without any user interaction |
| Animation Speed (ms) | Set the speed of the sliding animation in milliseconds. Lower values = faster transitions; higher values = slower, smoother transitions |
Settings#
The Settings section controls video behavior and performance.
| Option | Description |
|---|---|
| Preload | Controls how much of the video is loaded before the user plays it. This only applies to self-hosted videos (Media or File URL types). Options: Auto, Meta Data or None |
| Order | Choose how videos are ordered in the gallery: Default or Random |
| Click Action | Decide what happens when a visitor clicks on a video thumbnail: Play Inline or Play in Lightbox |
| Lazy Load Thumbnails | Toggle ON to load thumbnail images only when they are about to enter the visitor's viewport. This improves page load speed, especially for large galleries. |
Play Icon#
The Play Icon section controls the overlay icon shown on top of video thumbnails.
| Option | Description |
|---|---|
| Default Icon | Uses a standard play button icon overlay on the thumbnail. This is the most universally recognized indicator that a video is playable. |
| Custom Image | Upload your own image to use as the play button overlay. This is great for matching your brand style or creating a unique look. |
You can also customize the Typography of the play icon, letting you control the style of any text-based overlay when using a text or icon font for the play button.
Content#
The Content section controls the visual styling of the text information displayed below each video thumbnail, including the title and description.
| Option | Description |
|---|---|
| Padding | Add space around the title and description text within the content area |
| Text Align | Set the text alignment: Left, Center, or Right |
| Background Color | Set a background color for the content area that sits below the video thumbnail |
| Title Tag | Choose the HTML heading tag used for the video title (e.g., H2, H3, H4). This affects both SEO and accessibility |
| Title Typography | Customize the font, size, weight, color, and style of the video title text |
| Title Spacing | Control the space between the title and the description below it |
| Description Typography | Customize the font, size, weight, color, and style of the description text |
Video Schema#
Video Schema helps search engines understand the content of your videos. When enabled, schema data can improve how videos appear in search results.
This may help videos display:
- Rich snippets
- Video thumbnails
- Enhanced search listings
Arrows#
Arrows are the previous and next navigation buttons on either side of the carousel. This section lets you control their appearance in detail.
| Option | Description |
|---|---|
| Show Arrows | Toggle ON to display navigation arrows on the carousel. Toggle OFF to hide them entirely. |
| Height | Set the height of the arrow button area. |
| Width | Set the width of the arrow button area. |
| Background | Set the background color of the arrow buttons. |
| Border | Add and style a border around the arrow buttons, including color, width, and border radius. |
| Typography | Customize the size and style of the arrow icon or text used for navigation. |
In addition to the general arrow settings, you have separate controls for each individual arrow:
- Prev Arrow: Customize the appearance and icon used for the Previous (left) navigation arrow specifically.
- Next Arrow: Customize the appearance and icon for the Next (right) navigation arrow.
Dots#
The Dots section allows you to control the pagination indicators displayed in the carousel layout. These dots help users understand how many slides are available and make navigation easier.
| Option | Description |
|---|---|
| Show Dots | Toggle ON to display the dot navigation below the carousel. Toggle OFF to hide them. |
| Dynamic Dots | Toggle ON to enable dynamic dot behavior, where the active dot grows larger, and neighboring dots gradually scale down, creating a more modern, tactile indicator effect. |
| Vertical | Toggle ON to display the dots in a vertical column instead of the default horizontal row. |
| Height | Set the height of each individual dot. |
| Width | Set the width of each individual dot. |
| Top | Control the top position offset of the dot navigation container. |
| Right | Control the right position offset of the dot navigation container. |
| Bottom | Control the bottom position offset of the dot navigation container. |
| Left | Control the left position offset of the dot navigation container. |
| Border | Add a border around each dot, including color, size, and border radius. |
| Margin | Set the spacing between individual dots. |
| Color | Set the color of the inactive dots. |
| Active Color | Set the color of the currently active dot to make it visually distinct from the others. |
Wrapping Up!#
This was a detailed overview of the Video Gallery element from Max Addons. We hope this documentation helps you understand the element’s features, settings, and functionality, making it easier to create engaging video galleries inside Bricks Builder.