> ## Documentation Index
> Fetch the complete documentation index at: https://docs.jogg.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Avatar Videos with Transparent Background

> Generate avatars with transparent backgrounds for easy compositing

## Introduction

Create avatar videos with transparent backgrounds (alpha channel) for easy compositing over other content. Perfect for presentations, video editing, or web applications.

### Key Features

<CardGroup cols={2}>
  <Card title="Green Screen" icon="film">
    Chroma key background for video editing
  </Card>

  <Card title="Alpha Channel" icon="image">
    True transparency with WebM format
  </Card>

  <Card title="Easy Compositing" icon="layer-group">
    Overlay on any background
  </Card>

  <Card title="Professional Editing" icon="wand-magic">
    Works with all major video editors
  </Card>
</CardGroup>

<Info>
  **Best for:** Overlaying avatars on presentations, adding to existing videos, website backgrounds, video editing projects, green screen replacements, and AR/VR applications.
</Info>

***

## Quick Start

### Related API Endpoints

| Endpoint                         | Purpose                                  | Documentation                                                  |
| -------------------------------- | ---------------------------------------- | -------------------------------------------------------------- |
| `POST /create_video_from_avatar` | Create video with transparent background | [API Reference](/api-reference/v2/Video/CreateVideoFromAvatar) |
| `GET /avatar_video/{id}`         | Check video status                       | [API Reference](/api-reference/v2/Video/AvatarVideoGet)        |

### Key Parameters

| Parameter            | Type    | Required | Description                                                                  |
| -------------------- | ------- | -------- | ---------------------------------------------------------------------------- |
| `screen_style`       | integer | ✅        | **2** = Split screen (green screen), **3** = Picture in picture (WebM alpha) |
| `avatar.avatar_id`   | integer | ✅        | Choose full-body avatar for best results                                     |
| `avatar.avatar_type` | integer | ✅        | 0=Public, 1=Custom                                                           |
| `voice.type`         | string  | ✅        | "script" for text-to-speech                                                  |
| `voice.voice_id`     | string  | ✅        | Voice ID for text-to-speech                                                  |
| `voice.script`       | string  | ✅        | Text for avatar to speak                                                     |
| `aspect_ratio`       | string  | ✅        | portrait/landscape/square                                                    |

**Output Formats:**

* **Split Screen (screen\_style: 2)**: MP4 with green background - use chroma key in video editor
* **Picture in Picture (screen\_style: 3)**: WebM with alpha channel - true transparency, no keying needed

***

## Code Examples

### Scenario 1: Green Screen (Split Screen)

Create video with green screen for video editing:

```bash theme={null}
curl --request POST \
  --url 'https://api.jogg.ai/v2/create_video_from_avatar' \
  --header 'x-api-key: YOUR_API_KEY' \
  --header 'Content-Type: application/json' \
  --data '{
    "avatar": {
      "avatar_id": 81,
      "avatar_type": 0
    },
    "voice": {
      "type": "script",
      "voice_id": "en-US-ChristopherNeural",
      "script": "Welcome! This avatar has a transparent background."
    },
    "aspect_ratio": "portrait",
    "screen_style": 2,
    "caption": false
  }'
```

**Response:**

```json theme={null}
{
  "code": 0,
  "msg": "Success",
  "data": {
    "video_id": "video_123456"
  }
}
```

**Use for:**

* Video editing software (Premiere, Final Cut, DaVinci)
* Broadcast applications
* Maximum compatibility

**How to use:**

1. Import video to editor
2. Apply chroma key effect
3. Remove green color
4. Composite over background

***

### Scenario 2: WebM with Alpha Channel

Create video with true transparency:

```bash theme={null}
curl --request POST \
  --url 'https://api.jogg.ai/v2/create_video_from_avatar' \
  --header 'x-api-key: YOUR_API_KEY' \
  --header 'Content-Type: application/json' \
  --data '{
    "avatar": {
      "avatar_id": 81,
      "avatar_type": 0
    },
    "voice": {
      "type": "script",
      "voice_id": "en-US-ChristopherNeural",
      "script": "Your script here"
    },
    "aspect_ratio": "portrait",
    "screen_style": 3
  }'
```

**Response:**

```json theme={null}
{
  "code": 0,
  "msg": "Success",
  "data": {
    "video_id": "video_123456"
  }
}
```

**Use for:**

* Web applications
* HTML5 video players
* Direct compositing without keying

**How to use:**

```html theme={null}
<video autoplay loop muted playsinline>
  <source src="avatar-transparent.webm" type="video/webm">
</video>
```

<Check>
  Set `screen_style: 2` for green screen (video editing) or `screen_style: 3` for WebM with alpha channel (web applications).
</Check>

***

## Use Case Examples

<AccordionGroup>
  <Accordion title="Video Editing Projects">
    Composite avatars into existing videos:

    * Use green screen format (screen\_style: 2)
    * Import to Premiere, Final Cut, or DaVinci
    * Apply chroma key effect
    * Overlay on any background
  </Accordion>

  <Accordion title="Web Applications">
    Add avatars to websites:

    * Use WebM with alpha (screen\_style: 3)
    * Embed in HTML5 video player
    * Overlay on dynamic backgrounds
    * No keying required
  </Accordion>

  <Accordion title="Presentations">
    Add avatars to slides:

    * Create transparent avatar videos
    * Overlay on presentation slides
    * Professional appearance
    * Easy to update
  </Accordion>

  <Accordion title="AR/VR Applications">
    Use avatars in immersive experiences:

    * WebM with alpha channel
    * True transparency
    * Composite in 3D environments
    * Realistic integration
  </Accordion>
</AccordionGroup>

***

## Tips for Best Results

<Tip>
  **Quality Tips:**

  * Use full-body avatars for best results
  * Test composite in target environment
  * For web, use WebM with alpha (screen\_style: 3)
  * For video editing, use green screen (screen\_style: 2)
  * Avoid captions if compositing over text-heavy backgrounds
  * Green screen works best with even lighting
  * WebM alpha has cleaner edges
</Tip>

***

## Related Documentation

<CardGroup cols={2}>
  <Card title="Create Avatar Videos" icon="user" href="/api-reference/v2/API Documentation/CreateAvatarVideos">
    Main avatar video guide
  </Card>

  <Card title="Get Avatar Video" icon="video" href="/api-reference/v2/Video/AvatarVideoGet">
    Check video generation status
  </Card>

  <Card title="API Reference" icon="code" href="/api-reference/v2/Video/CreateVideoFromAvatar">
    Complete API documentation
  </Card>

  <Card title="Get Avatars" icon="users" href="/api-reference/v2/Avatar/PublicAvatarsGet">
    Browse available avatars
  </Card>
</CardGroup>