Image Examples

Each example is a complete POST /v1/renders body. Only fields that differ from their defaults are shown. See the element field reference for every default.

Both id and duration are required on image elements. An empty or missing id causes the image to be silently skipped by the renderer. A missing duration produces a zero-length window. The API returns 422 for either omission.

Images default to z_index: 0 — the same as video. If you place an image over a video clip without setting z_index, the video will cover it. Always set "z_index": 1 (or higher) on images that should appear above video.

Image over video

Logo centered on a video background. z_index: 1 places it above the video layer.

{
  "width": 1920,
  "height": 1080,
  "duration": 6,
  "elements": [
    {
      "type": "video",
      "id": "vid1",
      "source_url": "https://cdn.example.com/clip.mp4",
      "time": 0,
      "in_point": 0,
      "out_point": 6
    },
    {
      "type": "image",
      "id": "logo1",
      "source_url": "https://cdn.example.com/logo.png",
      "duration": 6,
      "width": "30%",
      "height": "30%",
      "z_index": 1
    }
  ]
}

Crop

Crop 10% from each edge, placed over video.

{
  "width": 1920,
  "height": 1080,
  "duration": 6,
  "elements": [
    {
      "type": "video",
      "id": "vid1",
      "source_url": "https://cdn.example.com/clip.mp4",
      "time": 0,
      "in_point": 0,
      "out_point": 6
    },
    {
      "type": "image",
      "id": "img1",
      "source_url": "https://cdn.example.com/photo.jpg",
      "duration": 6,
      "width": "80%",
      "height": "80%",
      "crop_top": 0.1,
      "crop_bottom": 0.1,
      "crop_left": 0.1,
      "crop_right": 0.1,
      "z_index": 1
    }
  ]
}

Border and rounded corners

{
  "width": 1920,
  "height": 1080,
  "duration": 6,
  "elements": [
    {
      "type": "video",
      "id": "vid1",
      "source_url": "https://cdn.example.com/clip.mp4",
      "time": 0,
      "in_point": 0,
      "out_point": 6
    },
    {
      "type": "image",
      "id": "img1",
      "source_url": "https://cdn.example.com/photo.jpg",
      "duration": 6,
      "width": "60%",
      "height": "60%",
      "border_radius": 24,
      "border_color": "#ffffff",
      "border_width": 4,
      "z_index": 1
    }
  ]
}

Drop shadow

{
  "width": 1920,
  "height": 1080,
  "duration": 6,
  "elements": [
    {
      "type": "video",
      "id": "vid1",
      "source_url": "https://cdn.example.com/clip.mp4",
      "time": 0,
      "in_point": 0,
      "out_point": 6
    },
    {
      "type": "image",
      "id": "img1",
      "source_url": "https://cdn.example.com/photo.jpg",
      "duration": 6,
      "width": "50%",
      "height": "50%",
      "shadow_color": "#000000",
      "shadow_blur": 20,
      "shadow_x": 8,
      "shadow_y": 8,
      "z_index": 1
    }
  ]
}

Get Started

Renders

Render Examples

Recipes

Tasks

Webhooks

SDKs

Image over video

Crop

Border and rounded corners

Drop shadow

​Image over video

​Crop

​Border and rounded corners

​Drop shadow

Image over video

Crop

Border and rounded corners

Drop shadow