# Create preview clips from streams

Generate short looping previews for hover-to-play interfaces

Browse pages convert better when users can preview content before clicking. "Streamline" (a streaming service like Netflix) shows a short muted loop on hover -- enough to hook viewers without buffering a full stream.

## API

<CodeGroup labels={["CLI", "TypeScript", "Python", "curl"]}>
```bash
ittybit video \
  -i https://streamline-app.com/content/doc-ocean-deep.mp4 \
  --start 45 \
  --end 52 \
  --width 480 \
  --mute \
  --format mp4
```

```typescript
const task = {
  input: 'https://streamline-app.com/content/doc-ocean-deep.mp4',
  kind: 'video',
  options: {
    start: 45,
    end: 52,
    width: 480,
    mute: true,
    format: 'mp4',
  },
};

const res = await fetch('https://api.ittybit.com/jobs', {
  method: 'POST',
  headers: {
    Authorization: `Bearer ${process.env.ITTYBIT_API_KEY}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(task),
});
const data = await res.json();
```

```python

task = {
    "input": "https://streamline-app.com/content/doc-ocean-deep.mp4",
    "kind": "video",
    "options": {
        "start": 45,
        "end": 52,
        "width": 480,
        "mute": True,
        "format": "mp4",
    },
}

res = requests.post(
    "https://api.ittybit.com/jobs",
    headers={"Authorization": f"Bearer {api_key}"},
    json=task,
)
data = res.json()
```

```bash
TASK='{
  "input": "https://streamline-app.com/content/doc-ocean-deep.mp4",
  "kind": "video",
  "options": {
    "start": 45,
    "end": 52,
    "width": 480,
    "mute": true,
    "format": "mp4"
  }
}'

curl -X POST https://api.ittybit.com/jobs \
  -H "Authorization: Bearer $ITTYBIT_API_KEY" \
  -H "Content-Type: application/json" \
  -d "$TASK"
```

</CodeGroup>

This extracts a 7-second clip starting at 45s, scales to 480px wide, and strips the audio track. The result is a small MP4 suitable for inline autoplay with the `loop` attribute.

## CLI

```bash
ittybit video \
  -i doc-ocean-deep.mp4 \
  -o preview.mp4 \
  --start 45 \
  --end 52 \
  --width 480 \
  --mute
```

## Picking the right segment

Choose a visually interesting segment with motion. Avoid static frames or dialogue-heavy moments -- without audio, talking heads don't convey much.

```bash
# Extract a poster frame first to check the segment
ittybit image \
  -i doc-ocean-deep.mp4 \
  -o check-45s.webp \
  --start 45 \
  --width 480
```

## Preview size guidelines

| Use case                  | Width | Duration | Expected size |
| ------------------------- | ----- | -------- | ------------- |
| Card hover (grid)         | 480   | 5-7s     | ~200-400 KB   |
| Hero banner               | 1280  | 3-5s     | ~500 KB-1 MB  |
| Thumbnail GIF replacement | 320   | 3s       | ~100-200 KB   |

## Using the preview in HTML

```html
<video
  src="/previews/doc-ocean-deep.mp4"
  muted
  loop
  playsinline
  width="480"
  onmouseenter="this.play()"
  onmouseleave="this.pause(); this.currentTime = 0;"
></video>
```

The `muted` and `playsinline` attributes are required for autoplay on mobile browsers.