Video Carousel
Test Page
Testing video carousel functionality with YouTube integration.
Our Video Library
Browse our comprehensive video library covering building permits, renovations, new homes, and commercial projects in British Columbia. Each video provides step-by-step guidance to help you navigate the permit process successfully.
Featured Videos
Watch our most popular videos that provide essential information for getting started with your building permit application in BC.
Test Instructions
This page tests the video carousel functionality. Please verify the following:
Functionality to Test:
- Navigation Buttons: Click the left/right arrow buttons to navigate through videos
- Touch Gestures: On mobile/tablet, swipe left/right to navigate
- Video Cards: Verify video titles, descriptions, and YouTube thumbnails display correctly
- Dropdown Details: Click "Learn More" to expand video details and metadata
- Double-Click to Play Inline: First click centers the video card, second click plays video inline within the card
- Inline Video Player: Video should play within the card with close button and escape key support
- Responsive Design: Test on different screen sizes (mobile, tablet, desktop)
- Loading States: Verify skeleton placeholders show while content loads
- Multiple Carousels: Ensure both carousels work independently
- Initial Video Selection: First carousel should center on "home-renovation" video, second on "commercial-ti"
Expected Behavior:
- Video cards should display with YouTube thumbnails, titles, and descriptions
- Carousel should scroll smoothly with navigation buttons and touch gestures
- Dropdown details should show duration, upload date, and full descriptions
- First click should center the video card with visual feedback, second click should play video inline with close button
- Cards should maintain consistent styling with existing portfolio cards and show selection feedback
Debug Information
Technical details for debugging and verification
Data Source Information:
Videos JSON: /assets/data/videos.json
Carousel Module: video-carousel
Navigation IDs: videos-prev-btn, videos-next-btn, videos-carousel
Featured Navigation IDs: featured-videos-prev-btn, featured-videos-next-btn, featured-videos-carousel
Console Commands for Testing:
// Check if carousel data loaded
console.log(document.querySelector('#videos-carousel').dataset);
// Check video cards rendered
console.log(document.querySelectorAll('.video-card').length);
// Test navigation buttons
document.querySelector('#videos-next-btn').click();