# Video Background

> Video background design, hero videos, and video performance.

- Skill: `dragoon0x/video-background` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/video-background`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/video-background/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/video-background

---


# Video Background

## When to Use
- Brand/mood setting on landing pages
- Product demo as hero
- Event/conference marketing
- NOT on app interfaces or tool pages

## Rules
1. Muted by default (never autoplay audio)
2. No controls visible (it's a background, not a player)
3. Loop seamlessly
4. Fallback poster image for slow connections
5. Reduce motion: show static image for `prefers-reduced-motion`
6. Dark overlay for text readability
7. Compress aggressively (720p max for backgrounds)
8. 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)