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