Video Hover Preview System 🎥
Video Hover Preview System 🎥
Overview
Netflix-style hover preview system for blog posts with videos. Features progress ring animation, position memory, and mobile optimization.
Features Implemented
🎯 Core Functionality
- Hover-to-Preview: Desktop users hover over video thumbnails to play 5-second previews
- Progress Ring Animation: Circular progress indicator shows preview progress
- Position Memory: Resumes from where user left off when hovering again
- Touch Support: Mobile users tap to play/pause videos
- Multi-Format Support: AV1, WebM, MP4 formats for optimal delivery
🎨 Visual Elements
- Animated Progress Ring: SVG-based circular progress indicator
- Play Icon Overlay: Centered play button with smooth scaling
- Hover Animations: Subtle scaling and opacity effects
- Completion Animation: Special pulse effect when preview completes
📱 Mobile Optimization
- Touch-to-Play/Pause: Intuitive mobile interaction
- Larger Touch Targets: Extended tap area for better UX
- Hardware Acceleration:
translateZ(0)
for smooth performance - Always Visible Indicators: Progress rings always visible on mobile
⚡ Performance Features
- Smart Video Loading:
preload="auto"
for optimized small videos - Event Cleanup: Proper event listener removal for Swup transitions
- Memory Management: Automatic cleanup of intervals and timeouts
- Reduced Motion Support: Respects user accessibility preferences
Implementation
File Structure
/assets/js/video-preview-manager.js # Main video preview logic
/assets/css/components/video-preview.css # Video preview styling
/includes/components/masonry-card.html # Video HTML structure
/includes/post-grid.html # CSS import
JavaScript Architecture
- VideoPreviewManager Class: Manages all video preview instances
- Individual Video Data: Each video container gets its own state
- Touch Device Detection: Adapts behavior for mobile vs desktop
- Progress Tracking: Real-time progress updates every 100ms
CSS Features
- Size Variations: Different progress ring sizes for large/medium/small posts
- Dark Mode Support: Adaptive colors for dark themes
- Accessibility: Reduced motion and high DPI optimizations
- Mobile Responsive: Different sizes and touch targets for mobile
Usage in Posts
Front Matter Configuration
---
title: "Your Post Title"
featured_video: "/assets/img/your-video/video.mp4"
featured_video_poster: "/assets/img/your-video/poster.jpg"
---
Video File Structure
For optimal delivery, include multiple formats:
/assets/img/your-video/
├── video.mp4 # Primary MP4
├── video.av1.mp4 # AV1 format (best compression)
├── video.webm # WebM format (Firefox/Chrome)
└── poster.jpg # Video poster image
Automatic Format Detection
The system automatically generates <source>
tags for:
- AV1:
video.av1.mp4
(highest compression) - WebM:
video.webm
(modern browsers) - MP4:
video.mp4
(universal fallback)
Browser Support
- Desktop: All modern browsers with hover support
- Mobile: Touch-enabled devices with video support
- Fallback: Static poster image if video fails to load
Performance Characteristics
- Video Size: Optimized 5-second previews (~500KB)
- Format Compression: AV1 > WebM > MP4 cascade
- Memory Usage: Automatic cleanup prevents memory leaks
- CPU Impact: Hardware acceleration for smooth animations
Integration with Swup
- Page Transitions: Automatic reinitialization after Swup navigation
- Event Cleanup: Proper cleanup before page transitions
- State Preservation: No conflicts with page transition animations
Accessibility Features
- Reduced Motion: Respects
prefers-reduced-motion
setting - Keyboard Navigation: Works with standard link navigation
- Screen Readers: Proper aria labels and semantic HTML
- High Contrast: Adapts to user contrast preferences
Debugging
Enable debug logging in browser console:
// Check if video preview manager is loaded
console.log('Video Preview Manager:', window.VideoPreviewManager);
// Check number of video containers found
const videos = document.querySelectorAll('.video-container');
console.log('Video containers found:', videos.length);
Browser Console Messages
The system provides detailed logging:
🎥 Video Preview Manager initialized
🎯 Found X video containers
🎬 Setting up video X
🎯 Mouse enter - starting preview from: X
👋 Mouse leave - pausing at: X
Future Enhancements
- Lazy Loading: Load video sources only when needed
- Quality Selection: Adaptive quality based on connection
- Analytics: Track hover engagement metrics
- Custom Durations: Per-post preview duration settings