When to Use
- Brand/mood setting on landing pages
- Product demo as hero
- Event/conference marketing
- NOT on app interfaces or tool pages
Rules
- Muted by default (never autoplay audio)
- No controls visible (it's a background, not a player)
- Loop seamlessly
- Fallback poster image for slow connections
- Reduce motion: show static image for
prefers-reduced-motion - Dark overlay for text readability
- Compress aggressively (720p max for backgrounds)
- Lazy load below fold
Performance
- Max file size: 5-10MB
- Format: MP4 (H.264) for broadest support, WebM as enhancement
- Consider replacing with CSS animation or SVG animation
- Don't autoplay on mobile (data usage + performance)