# 📹 Video Assets Directory

## Place Your Onboarding Video Here

This is where your onboarding video file should be placed.

### File Location

```
/public/assets/onboarding-video.mp4
```

### Supported Formats

| Format | Compatibility | Recommended |
|--------|---------------|-------------|
| **MP4** | Excellent (all browsers) | ✅ **YES** |
| WebM | Good (modern browsers) | Optional |
| OGV | Fair (older browsers) | Fallback |

### Recommended Specs

```
Format:      MP4 (H.264 codec)
Resolution:  1920×1080 (1080p) or 1280×720 (720p)
Duration:    60-90 seconds
Framerate:   30fps or 60fps
File size:   < 15MB (compress if larger)
Audio:       Remove if not needed (saves 30-40%)
```

### Compress Your Video

Use FFmpeg to compress if your video is too large:

```bash
# Basic compression
ffmpeg -i input.mp4 -c:v libx264 -crf 23 -preset medium output.mp4

# With scaling to 1080p
ffmpeg -i input.mp4 -c:v libx264 -crf 23 -vf scale=1920:1080 output.mp4

# Remove audio track
ffmpeg -i input.mp4 -c:v libx264 -crf 23 -an output.mp4
```

### Multiple Format Support (Optional)

For maximum compatibility, you can provide multiple formats:

```
/public/assets/onboarding-video.mp4   (primary)
/public/assets/onboarding-video.webm  (smaller file size)
```

Then update the config to use both:

```typescript
// In VideoOnboardingConfig.ts
<video>
  <source src="/assets/onboarding-video.webm" type="video/webm">
  <source src="/assets/onboarding-video.mp4" type="video/mp4">
</video>
```

### Next Steps

1. **Export your video** as MP4
2. **Name it:** `onboarding-video.mp4` (or update the path in config)
3. **Place it here:** `/public/assets/`
4. **Update config:** Edit `src/contentScript/VideoOnboardingConfig.ts`
5. **Test:** Run `npm run dev` and verify it loads

---

**Ready when you are!** 🎬
