Video Blur Loading

← Back to Demos

This demo showcases the LQIP (Low Quality Image Placeholder) technique used throughout the projects pages. When videos are loading, users see a blurred poster image that provides immediate visual feedback. This example uses the Yarmer Renewables project video with a scaled-down first frame as the LQIP.

Interactive Demo

Status: Ready
Loading...

How It Works

1. Blurred poster image shows immediately
2. Video loads in background
3. Smooth fade-in when ready

Creating the LQIP Image

The Low Quality Image Placeholder (LQIP) is created by extracting and scaling down the first frame of the video. Here's how we created the LQIP for the Yarmer Renewables video:

Step 1: Extract First Frame

Extract First Frame
ffmpeg -i yarmer-compressed.mp4 -vframes 1 -f image2 yarmer-frame.jpg

Step 2: Scale Down for LQIP

Scale Down for LQIP
ffmpeg -i yarmer-frame.jpg -vf "scale=64:36" yarmer-lqip.jpg

This creates a tiny 64×36 pixel image (maintaining 16:9 aspect ratio)

Step 3: CSS Blur Effect

CSS Blur Effect
.lqip-backdrop {
  background-image: url('/yarmer-lqip.jpg');
  filter: blur(12px);
  transform: scale(1.05);
}

The blur and scale hide pixelation while providing visual context

💡 Pro Tips

  • • Keep LQIP files under 1KB for instant loading
  • • Use WebP format for better compression
  • • Match the aspect ratio of your video
  • • Test with slow network connections