# Video Generation

> Generate MP4, WebM, and GIF videos from your templates with video elements, subtitles, and multi-page slideshows

- **URL**: https://orshot.com/docs/video-generation

---

Orshot generates videos from your Studio templates — turn static designs into animated content, add subtitles from audio, or combine multi-page templates into video slideshows. Set `response.format` to `mp4`, `webm`, or `gif`.

## Quick Start

To generate a video, set the `response.format` to a video format and include `videoOptions` for any video-specific settings:```javascript
const response = await fetch("https://api.orshot.com/v1/studio/render", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: "Bearer <YOUR_API_KEY>",
  },
  body: JSON.stringify({
    templateId: "<YOUR_TEMPLATE_ID>",
    modifications: {
      title: "Product Launch 2026",
      subtitle: "Coming this April",
      bgVideo: "https://example.com/product-demo.mp4",
    },
    response: {
      format: "mp4",
      type: "url",
    },
  }),
});

const data = await response.json();
console.log(data.data.content); // Video URL
```## Supported Formats

| Format | Best For                             | File Size |
| :----- | :----------------------------------- | :-------- |
| `mp4`  | Social media, web, general purpose   | Medium    |
| `webm` | Web-optimized video, modern browsers | Smaller   |
| `gif`  | Short loops, thumbnails, previews    | Larger    |

## How It Works

1. **Design a template** in [Orshot Studio](https://orshot.com/docs/orshot-studio) with video elements, text, images, and shapes
2. **Call the API** with a video format and pass content overrides in `modifications`
3. **Configure video settings** using `videoOptions` for trimming, audio control, subtitles, and optional page-combining transitions
4. **Receive your video** as a hosted URL, base64 string, or binary data (depends on response type and template type)

## API Request Structure

| Field                   | Type     | Required | Description                                                          |
| :---------------------- | :------- | :------- | :------------------------------------------------------------------- |
| `templateId`            | `string` | Yes      | Your Studio template ID                                              |
| `modifications`         | `object` | No       | Content overrides (text, images, video URLs)                         |
| `response.format`       | `string` | Yes      | `"mp4"`, `"webm"`, or `"gif"`                                        |
| `response.type`         | `string` | No       | `"url"`, `"base64"`, or `"binary"`                                   |
| `response.includePages` | `array`  | No       | Specific pages for multi-page video slideshows                       |
| `videoOptions`          | `object` | No       | Video controls (fps, quality, trim, audio, subtitles, combine pages) |

## Replacing Video Content

Replace video elements in your template by passing a new URL:```json
{
  "modifications": {
    "bgVideo": "https://example.com/new-background.mp4"
  },
  "response": {
    "format": "mp4",
    "type": "url"
  }
}
```## Multi-Page Video Slideshows

Multi-page templates can be rendered as a single video, with each page becoming a segment of the final video:```json
{
  "templateId": "<SLIDESHOW_TEMPLATE>",
  "modifications": {
    "page1@title": "Introduction",
    "page1@bgVideo": "https://example.com/intro.mp4",
    "page2@title": "Features",
    "page2@bgVideo": "https://example.com/features.mp4",
    "page3@title": "Get Started",
    "page3@bgVideo": "https://example.com/cta.mp4"
  },
  "response": {
    "format": "mp4",
    "type": "url"
  },
  "videoOptions": {
    "combinePages": true,
    "pageTransition": "fade",
    "pageTransitionDuration": 0.5
  }
}
```### Common `videoOptions`

- `fps` - output frame rate
- `quality` - encoder quality
- `trimStart`, `trimEnd` - trim output range in seconds
- `muted` - mute/unmute output audio
- `subtitleSource`, `subtitleColor`, `subtitleBackground`, `subtitleFontSize`, `subtitleFontFamily`, `subtitleBottom`
- `combinePages`, `pageTransition`, `pageTransitionDuration` - combine multi-page videos with optional transitions

## Render Costs

Video generation uses more renders than images or PDFs since each second of video requires additional processing. Longer videos consume proportionally more renders. You can reduce costs by trimming videos to shorter durations or using `includePages` to limit which pages are included.

Check your [workspace usage dashboard](https://orshot.com) for current render consumption and limits.

## Example: Social Media Clip```javascript
const response = await fetch("https://api.orshot.com/v1/studio/render", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: "Bearer <YOUR_API_KEY>",
  },
  body: JSON.stringify({
    templateId: "<SOCIAL_VIDEO_TEMPLATE>",
    modifications: {
      headline: "5 Tips for Better Productivity",
      author: "Jane Smith",
      bgVideo: "https://example.com/office-bg.mp4",
      "bgVideo.trimStart": 0,
      "bgVideo.trimEnd": 15,
      "bgVideo.muted": true,
    },
    response: {
      format: "mp4",
      type: "url",
    },
    videoOptions: {
      subtitleSource: "https://example.com/voiceover.mp3",
      subtitleColor: "#ffffff",
      subtitleBackground: "rgba(0,0,0,0.6)",
      subtitleFontSize: "28px",
    },
  }),
});
```## What's Next