How to Add Animated Overlays to Videos in Workflows

Use Workflows to overlay an Animation onto a video as a picture-in-picture, using an Animation template and the Overlay Video tools and chain it with other Bannerbear operations.

For this example, we'll use the "Blue Yellow Simple Lower Thirds" template from our Template Library.

Inputs

With a fresh Workflow, use the + Add Input button to declare your inputs. These are the parameters that you supply to the API when you run your workflow.

Each Inputs has:

• name - used as references in your workflows and API requests
• type - the type of input you're supplying
  • text           
  • url          
  • number           
  • boolean (true/false)
• required - determines whether a run must supply this input

Animation

Add an Animation step and select your Animation Template from the drop-down menu. Use the + ref button to select the appropriate references (your inputs in this case).

🐻 Bear Tip:  Select the Transparent background check-box to ensure your animation has a transparent background!

Add a Tool step and select Video Overlay. Use the + ref drop menu to reference your Base video input reference (the url input for the video we're layer onto), and the Overlay video output for the animation output from the previous step.

🐻 Bear Tip: The Position presets and X/Y options must not be used together. Use either, not both.

API Workflow Run

Send a POST request to the /v5/workflow_runs endpoint, along with your workflow UID and your inputs.

var data = {
  "workflow": "VymBYa7gMjW6JQ2njM",
  "inputs": {
    "base": "https://www.bannerbear.com/video/webcam_example.mov",
    "title": "Lorem ipsum",
    "pretitle": "Nullam viverra",
    "subtitle": "Solor sit amet"
  }
}
fetch('https://api.bannerbear.com/v5/workflow_runs', {
  method: 'POST',
  body: JSON.stringify(data),
  headers: {
    'Content-Type' : 'application/json',
    'Authorization' : `Bearer ${API_KEY}`
  }
})

🐻 Bear Tip: Workflows can be created via the API as well. See Create a Workflow for more.