Picture in Picture Video Editor

Edit a picture in picture (PiP) style video

Max file size: 250MB
Max length: 2 minutes
Max file size: 250MB

Your video will display here

Hold tight, rendering may take a minute...

About the picture in picture demo

Picture in picture (PiP) is a common technique used in videos. It features a main background video with a small inset video layered on top.

Online learning, gaming and coding are examples that use picture in picture. The background video might be a an education reference, a block of code or a live video game. The inset video is usually a presenter faceing and talking to the camera.

This demo lets you upload a background video which will fill the screen. You can upload a second video which will be the inset video. The scale and position of the inset video can be set using the interface.

This demo is available on GitHub as an open source project. You can clone the project and use it as the basis for your own project. There is also a tutorial here to create picture in picture videos using Node.js.

Get started with Shotstack's video editing API in two steps:

  1. Sign up for free to get your API key.
  2. Send an API request to create your video:
    curl --request POST 'https://api.shotstack.io/v1/render' \
    --header 'x-api-key: YOUR_API_KEY' \
    --data-raw '{
    "timeline": {
    "tracks": [
    {
    "clips": [
    {
    "asset": {
    "type": "video",
    "src": "https://shotstack-assets.s3.amazonaws.com/footage/beach-overhead.mp4"
    },
    "start": 0,
    "length": "auto"
    }
    ]
    }
    ]
    },
    "output": {
    "format": "mp4",
    "size": {
    "width": 1280,
    "height": 720
    }
    }
    }'