Video Gallery widget from PowerPack Addons for Elementor helps you create professional and interactive video galleries directly inside Elementor.
Using this widget, you can display videos from YouTube playlists and channels, create fully custom video galleries, organize videos with filters, display videos in Grid or Carousel layouts, and more!
Getting Started: Using the Video Gallery Widget#
Follow these steps to add the Video Gallery widget to your page:
- Open the page where you want to add the Video Gallery widget in Elementor.
- In the widgets panel on the left, type “video gallery” in the search bar.
- Drag and drop the widget onto your page.
- Make sure to check "PP" icon on the widget.
- Once added, you’ll see two main tabs: Content and Style
Content Tab#
The Content Tab includes the following sections:
- Gallery
- Filter
- Play Icon
- Gallery Settings
- Carousel Settings
- Load More Button
Gallery#
Source#
Gallery section is where you decide where your videos come from. You have three source options to choose from:
| Source Option | Description |
|---|---|
| Custom | Add videos manually one by one |
| YouTube Playlist | Fetch videos from a YouTube playlist |
| YouTube Channel | Display videos from a YouTube channel |
Source: Custom#
When you select Custom, you manually build your gallery by adding individual video items. By default, you will see six pre-configured items (Item #1 through Item #6).
Click on any item to expand its settings.
Each item contains two sub-sections: Content and Schema.
Content Sub-Section
This is where you configure the video itself and how it appears in the gallery.
- Source: Choose the platform for this specific video. Available options are:
- YouTube: Paste a standard YouTube link or a YouTube Shorts link
- Vimeo: Paste a Vimeo video link
- Media: Upload a video file directly from your WordPress Media Library
- File URL: Paste a direct URL to any hosted video file
- Dynamic Data: Connect to dynamic data sources for advanced use cases
- Captions: Toggle this on or off to show or hide captions for the video
- Filter Label: Assign a category tag to this video (e.g., “YouTube”, “Tutorial”, “Product”). This label is used by the Filter feature to let visitors sort videos by category.
- Video Title: Enter a title for this video. This appears below the thumbnail in the gallery.
- Description: Add a short description or summary for the video
- Thumbnail Size: Choose the size of the thumbnail image displayed for this video
- Custom Thumbnail: By default, the widget automatically fetches the thumbnail from YouTube or Vimeo. Enable this toggle to use your own custom image as the thumbnail instead
Schema Sub-Section
Schema markup helps search engines like Google better understand and index your video content. Filling this in can improve your video’s visibility in search results.
- Video Title: The title of the video as it should appear to search engines
- Description: A description of the video content for search engines
- Image: A thumbnail image URL that represents the video in search results
- Upload Date & Time: The date and time the video was originally published
Source: YouTube Playlist#
When you select YouTube Playlist, the widget automatically pulls videos from a specific YouTube Playlist using its Playlist ID.
Configure the following options:
- YouTube Playlist ID: Paste the unique ID of the YouTube Playlist you want to display. You can find this in the playlist’s URL on YouTube
- Number of Videos: Set how many videos from the playlist should be displayed in the gallery
- Show Video Title: Toggle on to display the title of each video below its thumbnail
- Show Video Description: Toggle on to show the video description beneath the title
- Thumbnail Size: Select the thumbnail image size for videos in the gallery
- Refresh Videos After: Set how often the widget should re-fetch the playlist data to show new or updated videos
Source: YouTube Channel#
When you select YouTube Channel, the widget automatically fetches the latest videos from an entire YouTube Channel.
Configure the following options:
- YouTube Channel ID: Paste the unique ID of the YouTube Channel. This is found in the channel’s URL or in the channel settings on YouTube
- Number of Videos: Choose how many videos from the channel to display
- Show Video Title: Toggle on to display each video’s title
- Show Video Description: Toggle on to display each video’s description
- Refresh Videos After: Set how frequently the widget checks for new videos on the channel
Enable Schema (Global)#
This option enables structured Schema markup for the entire Video Gallery, not just individual items. When turned on, it adds schema.org video data to all videos in the gallery, helping search engines better understand and rank your content.
Filter#
Filter section is only available when Custom is selected as your video source. It lets you add category filter buttons above your gallery, so visitors can click to show only videos from a specific category.
Enable Filter#
Toggle this on to activate the filter bar. Once enabled, the following options appear:
- “All” Filter Label: Customize the label for the button that shows all videos. By default, it says “All”, but you can change it to anything you prefer (e.g., “Show All”, “Everything”)
- Alignment: Set the alignment of the filter buttons: Left, Center, or Right
- Pointer: Choose the visual indicator style for the active/hovered filter button. Options include:
- Underline: A line appears below the active filter label
- Overline: A line appears above the active filter label
- Double Line: Lines appear both above and below
- Framed: A border box surrounds the active filter label
- And more: Additional pointer styles may be available depending on your version
- Animation: Set how the pointer animates when switching between filters. Options include:
- Fade: The pointer fades in and out
- Slide: The pointer slides from one filter to another
- Glow: A glowing effect appears on the active filter
- Drop In: The pointer drops into position
- And more: Additional animation styles are available
Play Icon#
Play Icon section controls the play button that appears above each video thumbnail in the gallery.
- Icon Type: Choose how the play button is displayed. There are two options:
- Icon: Use a built-in icon from the icon library (e.g., a standard triangle play button or any other icon from icon sets)
- Image: Upload a custom image to use as the play button, great for matching your brand style
Gallery Settings#
Gallery Settings section controls the overall layout and playback behavior of your Video Gallery.
Layout Options
- Layout: Choose how your videos are arranged on the page:
- Grid: Videos are displayed in a structured, multi-column grid layout
- Carousel: Videos are displayed in a horizontal scrolling carousel/slider
- Columns: Set the number of columns in the gallery. For example, choose 3 to show three videos per row
- Aspect Ratio: Set the width-to-height ratio for each video thumbnail. Common options include 16:9 (widescreen), 4:3, and 1:1 (square)
- Preload: If you are using self-hosted (Media or File URL) videos, choose when the video data starts loading. This helps manage page load performance
- Mute: Enable this to mute videos when they start playing automatically
- Click Action: Choose what happens when a visitor clicks on a video thumbnail:
- Inline: The video plays directly inside the gallery thumbnail on the page
- Lightbox: The video opens in a full-screen popup overlay (lightbox) for a more focused viewing experience
- Ordering: Control the order in which videos are displayed:
- Default: Videos appear in the order you added them
- Random: Videos are shuffled into a random order each time the page loads
Carousel Settings#
These options appear only when Carousel is selected as the Layout. They control how the carousel behaves.
- Animation Speed: Set how fast the transition animation plays when sliding between videos (in milliseconds)
- Autoplay: Toggle on to have the carousel slide automatically without any user interaction
- Autoplay Speed: Set how long (in milliseconds) each slide stays visible before advancing to the next one
- Pause on Hover: When enabled, the autoplay pauses whenever a visitor hovers their mouse over the carousel
- Infinite Loop: When enabled, the carousel loops back to the beginning after the last slide
- Adaptive Height: When enabled, the carousel height adjusts dynamically to match the height of the currently visible slide
- Direction: Choose the direction the carousel slides: Left to Right or Right to Left
- Navigation: Choose what navigation controls are shown:
- Arrows: Left and right arrow buttons appear for manual navigation
- Pagination: Pagination indicators appear below the carousel
- Pagination Type: If Pagination is enabled, choose the style:
- Dots: Small dots appear, one per slide
- Fraction: Shows a current/total counter (e.g., “2 / 6”)
Style Tab#
Style Tab is where you control the visual appearance of your Video Gallery. Everything from spacing and overlay colors to typography and navigation arrow styles can be customized here.
The Style Tab contains the following sections:
- Layout
- Overlay
- Play Icon
- Content
- Filters (only when source is Custom and layout is Grid)
- Arrows
- Pagination: Dots
- Pagination: Fraction
Layout#
Layout section controls the spacing and structural appearance of the gallery grid or carousel.
Use the settings in this section to adjust:
- Column gap: the horizontal space between video items
- Row gap: the vertical space between rows of videos
- Overall padding and margins around the gallery container
Overlay#
Overlay section controls the color or gradient that appears on top of the video thumbnail when a visitor hovers over it.
You can customize:
- Overlay Background Color: set a solid color or gradient that covers the thumbnail on hover
- Overlay Opacity: control how transparent or opaque the overlay is
- Blend Mode: choose how the overlay blends with the thumbnail image
Play Icon#
This section controls the appearance of the play button displayed over the video thumbnail.
Options typically include:
- Icon Color: choose the color of the play icon
- Icon Size: adjust how large or small the play button appears
- Icon Background: add a background shape (circle, square, etc.) behind the icon
- Background Color: set the color of the icon background
- Padding: control the inner spacing around the icon inside its background
- Border and Border Radius: add a border or rounded corners to the icon background
Content#
Content section controls the styling of the video title and description text displayed below or above each thumbnail.
You can customize:
- Title Typography: font family, size, weight, color, and line height
- Title Color: set a specific text color for video titles
- Title Spacing: control the spacing above and below the title
- Description Typography: font style and size for the description text
- Description Color: set the color of the description text
- Content Padding: add padding around the content area
- Content Alignment: align the text to the left, center, or right
Filters#
This section is only visible when the source is set to Custom and the Layout is Grid. It controls the visual styling of the filter buttons displayed above the gallery.
You can style:
- Filter Label Typography: font, size, weight, and style for filter button text
- Text Color: color of the filter label text in its normal (inactive) state
- Active Text Color: color when a filter button is selected/active
- Background Color: background of each filter button
- Active Background Color: background of the currently active filter button
- Padding: inner spacing inside each filter button
- Spacing Between Filters: horizontal gap between filter buttons
- Border: add a border to filter buttons
- Border Radius: round the corners of filter buttons
- Pointer Color: the color of the underline, overline, or frame pointer set in the Content Tab
Arrows#
This section controls the appearance of the left and right navigation arrows in the Carousel layout. This option appears only when Carousel is selected as the Layout, and Arrows is enabled in the Navigation setting.
You can customize:
- Arrow Icon Color: set the color of the arrow icons
- Arrow Background Color: add a background color behind each arrow
- Arrow Size: adjust the size of the arrow icons
- Arrow Position: control where the arrows are positioned relative to the carousel
- Border and Border Radius: add borders or round the arrow buttons
- Hover States: change colors when a visitor hovers over the arrows
Pagination: Dots#
This section styles the dot-style pagination indicators shown below the Carousel. It is visible when the Pagination Type is set to Dots.
You can customize:
- Dot Color: the color of the inactive dots
- Active Dot Color: the color of the dot representing the currently visible slide
- Dot Size: the diameter of each dot
- Dot Spacing: the gap between dots
- Border Radius: make dots circular or adjust their shape
Pagination: Fraction#
This section styles the fraction-style pagination (e.g., “2 / 6”) shown below the Carousel. It is visible when the Pagination Type is set to Fraction.
You can customize:
- Text Color: the color of the fraction text
- Typography: font size, weight, and family for the fraction counter
- Alignment: position the fraction counter to the left, center, or right
- Spacing: control the distance between the carousel and the fraction counter
Wrapping Up!#
This was the complete overview of the PowerPack Video Gallery widget for Elementor. Hope this helps!