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.
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
}
}
}'