Video Library

Overview

The Video Library with Tabs module is a powerful and elegant solution for showcasing video content on your website. Built with a Netflix-inspired design, this module combines intuitive navigation with flexible display options, making it perfect for course libraries, tutorial collections, product demos, and any video-heavy content.

With its tabbed filtering system, users can easily browse videos by category, while the seamless toggle between carousel and grid views provides an optimal viewing experience on any device. The module supports both direct video URLs and custom embed codes, giving you complete flexibility in how you deliver your video content.

Whether you're building an online learning platform, a product showcase, or a media library, this module delivers a professional, user-friendly experience that keeps visitors engaged with your content.

Key Features

Tab-Based Category Filtering

Organize videos into custom categories with an intuitive tab navigation system. Each tab can have its own custom badge color, making it easy for users to identify different content types at a glance.

Dual View Modes

Switch seamlessly between carousel and grid layouts with the "Explore All" toggle. The carousel mode is perfect for browsing, while grid mode displays all videos for quick access.

Per-Tab State Memory

The module remembers whether each category is in carousel or grid mode, so users' preferences are maintained as they switch between tabs.

Smart "Explore All" Button

The "Explore All" button automatically appears only when a category has more than 4 videos, keeping the interface clean and relevant.

Flexible Video Sources

Support for both video URLs and custom embed codes means you can integrate content from YouTube, Vimeo, custom players, or any video platform.

Custom Badge Colors

Define unique background and text colors for each category's badge, creating a visually organized and branded experience.

Video Modal Player

Videos open in a elegant, full-screen modal with smooth transitions. The modal closes via the close button, ESC key, or by clicking outside.

Arrow Navigation

Intuitive left/right arrow controls appear on hover in carousel mode, making it easy to browse through video collections.

Fully Responsive Design

The module adapts beautifully to all screen sizes, from desktop to mobile, with touch-optimized scrolling and appropriately sized cards.

Visual Feedback

Play icons and navigation elements use subtle opacity effects to indicate interactivity, appearing lighter by default and full color on hover.

Accessibility Features

Includes proper ARIA labels for screen readers, keyboard navigation support (ESC to close modal), and semantic HTML structure.

No Scrollbar Clutter

Scrollbars are hidden while maintaining full scrolling functionality, keeping the interface clean and distraction-free.

Use Cases

Online Learning Platforms

Perfect for organizing course videos, tutorials, and educational content by subject, level, or topic.

Product Showcases

Display product demos, how-to videos, and customer testimonials organized by product line or category.

Media Libraries

Create professional video galleries for news content, interviews, webinars, or company announcements.

Documentation Centers

Organize video tutorials, training materials, and help content for easy customer self-service.

Portfolio Websites

Showcase creative work, case studies, or project videos with elegant category-based organization.