How to use Video Gallery Widget of Sky Addons for Elementor

The Sky Addons Video Gallery widget combines a full-size video player with a scrollable thumbnail playlist into a single Elementor widget. It supports YouTube, Vimeo, Dailymotion, and self-hosted video files, and the playlist can run vertically or horizontally. Each video entry has its own title, credit/subtitle, optional credit URL, and custom poster image — with automatic thumbnail fetching if no poster is supplied. This documentation will guide you through the process of using the Video Gallery Widget to create a polished, playlist-driven video experience on your website.

Features:

1. Four Video Sources: Mix YouTube, Vimeo, Dailymotion, and self-hosted (Media Library or external URL) videos freely in the same playlist.
2. Vertical and Horizontal Layouts: Switch the gallery between a vertical stacked layout (player on left, playlist on right) and a horizontal layout (player on top, playlist below) with one click.
3. Automatic Poster Images: If no custom poster is uploaded, the widget fetches the video’s native thumbnail from YouTube, Vimeo, or Dailymotion automatically.
4. Swiper-powered Player and Playlist: Both the main player and the playlist use Swiper.js, with loop, speed, transition effects (slide, fade, coverflow), free-mode scrolling, mouse wheel support, scrollbar, and navigation arrows.
5. Title and Credit Overlay: Display the video title and a credit/subtitle line over the player poster. Position the text in six zones (top/bottom × left/center/right) with independent typography, padding, and text shadow.
6. Play-on-Hover Option: Show the play button only when the user hovers over the poster, keeping the interface clean.

Insert Video Gallery Widget

1. Open your page in Elementor and click the + icon to add a new section.
2. Search for Video Gallery in the widget panel and drag it onto the canvas.

Configure the Video List

The Video Gallery section in the Content tab is where you build your playlist.

1. Layout: Choose Vertical (side-by-side player and playlist) or Horizontal (player above, playlist below).
2. Size: Set the overall height of the widget (400–1000 px). This controls both the player and the playlist column height together.
3. Video List (Repeater): Each list item has three tabs:
   — Video tab: Choose the Source (YouTube, Vimeo, Dailymotion, Self Hosted). Paste the video URL in the corresponding Link field. For self-hosted, choose a file from the Media Library or enter an External URL.
   — Content tab: Enter a Title (shown on the player poster and in the playlist), a Credit / Subtitle (shown below the title), and optionally a Credit URL to make the credit a clickable link.
   — Poster tab: Upload a custom poster image. Leave empty to use the auto-fetched thumbnail.

Configure Player Settings

The Player Settings section controls the main video player behavior.

1. Direction: Set the Swiper slide direction to Horizontal or Vertical for the player pane.
2. Loop: Toggle on to loop the player slides endlessly.
3. Slide Speed: Set how many seconds the transition animation takes (0–10 s).
4. Transition Effect: Choose Slide, Fade, or Coverflow for the player animation between videos.
5. Show Title: Toggle to show or hide the title overlay on the player poster. When on, choose the Title HTML Tag (h1–h6, p, span, div).
6. Text Position: Place the title and credit overlay in one of six zones over the player (Top Left, Top Center, Top Right, Bottom Left, Bottom Center, Bottom Right). Responsive.
7. Text Alignment: Align the text within the overlay area (Left, Center, Right, Justified). Responsive.
8. Show Play Button On Hover: Toggle to hide the play button until the user hovers over the player.

Configure Playlist Settings

The Playlist Settings section controls the thumbnail sidebar behavior.

1. Loop: Loop the playlist Swiper.
2. Mouse Wheel: Allow scrolling through the playlist with the mouse wheel.
3. Free Mode: Enable free-scroll momentum so the playlist doesn’t snap to slides.
4. Title HTML Tag: Set the heading tag for titles in the playlist thumbnails.
5. Show Scrollbar: Show or hide the Swiper scrollbar on the playlist.
6. Show Navigation: Show or hide the previous/next navigation arrows on the playlist.

Style Your Video Gallery

Use the Style tab to customize every visual element.

1. Video Player:
   Set a Poster Overlay color (semi-transparent tint over the poster image) and control the text padding for the title/credit block.
2. Video Title:
   Set text color, background, typography, padding, and text shadow for the title overlay on the player.
3. Video Credit/Subtitle:
   Set spacing (margin-top from title), text color, background, typography, padding, and text shadow for the credit line on the player.
4. Play Button:
   Set icon size, padding, border, and border radius. Use Normal/Hover tabs for text color, background, text shadow, and box shadow.
5. Playlist:
   Set separator size and color between playlist items, text padding, and Normal/Hover/Active backgrounds for the entire playlist area.
6. Thumbnail:
   Set thumbnail width, border, and border radius for the small poster images in the playlist sidebar.
7. Playlist Title:
   Typography and Normal/Hover/Active text colors for playlist item titles.
8. Playlist Credit/Subtitle:
   Typography and Normal/Hover/Active text colors for playlist item credits.
9. Playlist Navigation:
   Size, Normal/Hover color, and background for the previous/next arrows.
10. Playlist Scrollbar:
    Set scrollbar width, track color, and drag handle color.

Save and Preview

1. Click Update in Elementor to save your page.
2. Preview the page to see your Video Gallery widget in action.

Best Practices

1. Upload a custom poster for each video when possible — custom posters load faster than remote thumbnails and give you design control over the first impression.
2. Keep playlist titles short (under 50 characters) so they don’t overflow the thumbnail sidebar at the default width.
3. Use the Horizontal layout for landing pages where the video is the primary focus, and Vertical for sidebar or blog-detail pages where vertical space is more available.
4. For self-hosted videos, use MP4 format encoded at H.264 for the broadest browser compatibility and smallest file size.

Troubleshooting

1. Videos do not play when clicked. Make sure the video URL is correct and publicly accessible. For YouTube/Vimeo, confirm the video is not set to private or restricted to certain domains.
2. Playlist thumbnails show a grey placeholder instead of the video poster. Automatic thumbnail fetching relies on external services (YouTube’s image CDN, Vimeo’s API). If thumbnails fail to load, upload a custom poster in the Poster tab of each repeater item.
3. The layout looks broken after changing Vertical to Horizontal. After switching the Layout option, click the Elementor refresh icon or save and reload the editor. The Swiper layout is re-initialized on page load.

Frequently Asked Questions

How many videos can I add to the playlist?

There is no hard limit. Swiper handles large playlists well, but keep in mind that each entry adds to the page’s DOM size. Playlists of 10–30 items are typical for performance-conscious sites.

Can I mix YouTube and self-hosted videos in the same gallery?

Yes. Each repeater item has its own Source selector, so you can freely mix YouTube, Vimeo, Dailymotion, and self-hosted items in the same playlist.

Does the video autoplay when the page loads?

No. Videos start playing only when the visitor clicks the play button for a specific item. Browser autoplay policies block silent autoplay on most modern browsers.

Can I use this widget without a playlist — just as a single video player?

Yes. Add only one item to the repeater. The playlist pane will be present but only contain that single thumbnail. For a cleaner single-video look, the playlist pane can be styled very small or the navigation/scrollbar hidden.

Will the widget embed videos from private YouTube or Vimeo accounts?

No. The widget embeds videos via iframe using each platform’s standard embed URL. Private, unlisted-with-domain-restriction, or paywalled videos will not load in the player.

Related Documentation

Explore other Sky Addons widgets and extensions that complement the Video Gallery widget:

• Social Share: Add share buttons below your video gallery so viewers can spread your content easily.
• WC Products Carousel: Pair a video tutorial gallery with a product carousel below it for a content-to-purchase flow.

Conclusion

The Video Gallery widget turns any page into a professional video hub — combining a full-size player, a scrollable playlist, multi-platform support, and deep style customization in a single drag-and-drop Elementor widget. If you have any questions or need help, visit the Sky Addons support center.