Layout and framing

Safe area for vertical video

The same two lines, once pushed to the edges where a platform's own buttons cover them, and once inside the safe area: x 8 to 92 percent, y 13.5 to 83.

Shown on A dancer filmed upright, in a 9:16 frame

Before · the same request without it
After · rendered from the request below

The entry

Put it on the clip's transform, beside its size and position.

{
  "transform": {
    "position": {
      "x": "50%",
      "y": "18%"
    }
  }
}

Every setting and default is in the docs

Run it

The whole request behind the render above. Paste it as it is, or swap the file for your own.

job.ts
import { createClient, outputUrl } from "@rendobar/sdk";


const rb = createClient({ apiKey: process.env.RENDOBAR_API_KEY });


const job = await rb.jobs.run({
  type: "compose",
  params: {
    schemaVersion: 1,
    output: {
      format: "mp4",
      resolution: {
        width: 608,
        height: 1080
      }
    },
    timeline: {
      tracks: [
        {
          clips: [
            {
              asset: {
                type: "video",
                src: "https://cdn.rendobar.com/compose/showcase/media/dancer-v.mp4"
              },
              start: 0,
              transform: {
                fit: "cover"
              }
            }
          ]
        },
        {
          clips: [
            {
              asset: {
                type: "text",
                text: "ONE MORE TURN",
                style: {
                  font: "Bebas Neue",
                  size: 76,
                  weight: 400,
                  color: "#FFFFFF",
                  shadow: {}
                }
              },
              transform: {
                position: {
                  x: "50%",
                  y: "18%"
                }
              },
              start: 0,
              length: 6
            }
          ]
        },
        {
          clips: [
            {
              asset: {
                type: "text",
                text: "Sixty seconds of rehearsal",
                style: {
                  font: "Inter",
                  size: 32,
                  weight: 700,
                  color: "#FFFFFF",
                  stroke: {
                    color: "#0B0F0D",
                    width: 5
                  },
                  shadow: {}
                }
              },
              transform: {
                position: {
                  x: "50%",
                  y: "70%"
                }
              },
              start: 0,
              length: 6
            }
          ]
        }
      ]
    }
  },
});


console.log(outputUrl(job));

Install with npm i @rendobar/sdk. jobs.run() submits and waits, so it returns the finished job in one call.

terminal
curl https://api.rendobar.com/jobs \
  -H "Authorization: Bearer $RENDOBAR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"type":"compose","params":{"schemaVersion":1,"output":{"format":"mp4","resolution":{"width":608,"height":1080}},"timeline":{"tracks":[{"clips":[{"asset":{"type":"video","src":"https://cdn.rendobar.com/compose/showcase/media/dancer-v.mp4"},"start":0,"transform":{"fit":"cover"}}]},{"clips":[{"asset":{"type":"text","text":"ONE MORE TURN","style":{"font":"Bebas Neue","size":76,"weight":400,"color":"#FFFFFF","shadow":{}}},"transform":{"position":{"x":"50%","y":"18%"}},"start":0,"length":6}]},{"clips":[{"asset":{"type":"text","text":"Sixty seconds of rehearsal","style":{"font":"Inter","size":32,"weight":700,"color":"#FFFFFF","stroke":{"color":"#0B0F0D","width":5},"shadow":{}}},"transform":{"position":{"x":"50%","y":"70%"}},"start":0,"length":6}]}]}}}'

Returns immediately with a job id. Poll GET /jobs/{id} or register a webhook rather than blocking on the request.

Questions

What does the safe area effect do in compose?

The same two lines, once pushed to the edges where a platform's own buttons cover them, and once inside the safe area: x 8 to 92 percent, y 13.5 to 83.

How do I add safe area to a video with an API?

Send a compose job to the Rendobar API with this entry in the timeline: {"transform":{"position":{"x":"50%","y":"18%"}}}. Put it on the clip's transform, beside its size and position. The request on this page is complete and renders as shown.

Footage and sound

More features

Position Where the clip sits in the frame. x and y are the clip's centre by default, as a percent of the frame or in pixels. Scale How big the clip is drawn, as a multiple of its natural size. 0.34 makes it a picture in picture. Rotate Turn the clip, in degrees, about its anchor. A few degrees reads as a photograph laid on a desk. Anchor What `position` points at. With topLeft the clip's corner lands on the point instead of its middle. Size The clip's own box, in percent or pixels. Give it a shape the source does not have and `fit: "cover"` crops the picture into it, which is how a wide shot becomes a tall panel. Fit A wide photograph in a phone-shaped box. contain shows all of it and leaves bars, cover fills the box and cuts what overflows.

See all 117 features →