I need a solution for overlaying a video above another vide and place it in a custom position.
I saw that are nine predefined positions. Can I also set a custom position with x and y coordinates?
See example below:
You can use the offset feature: https://shotstack.io/docs/api
When using offsets you need to use relative positioning not pixels - i.e. 0.1 is 1/10 of the screen width, 0.5 is half screen width. Play about with the offsets and you should be able to achieve the effect you are looking for.
Take a look at the following example:
{
"timeline": {
"background": "#000000",
"tracks": [
{
"clips": [
{
"asset": {
"type": "video",
"src": "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/examples/picture-in-picture/commentary.mp4",
"volume": 1
},
"start": 0,
"length": 4.96
},
{
"asset": {
"type": "video",
"src": "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/examples/picture-in-picture/commentary.mp4",
"volume": 1,
"trim": 5
},
"start": 5,
"length": 4.96,
"scale": 0.35,
"position": "bottomRight",
"offset": {
"x": -0.05,
"y": 0.08
}
},
{
"asset": {
"type": "video",
"src": "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/examples/picture-in-picture/commentary.mp4",
"volume": 1,
"trim": 10
},
"start": 10,
"length": 2.46,
"scale": 0.35,
"position": "topRight"
},
{
"asset": {
"type": "video",
"src": "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/examples/picture-in-picture/commentary.mp4",
"volume": 1,
"trim": 12.5
},
"start": 12.5,
"length": 2.5,
"scale": 0.25,
"position": "topRight"
}
]
},
{
"clips": [
{
"asset": {
"type": "video",
"src": "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/examples/picture-in-picture/code.mp4"
},
"start": 5,
"length": 10
}
]
}
]
},
"output": {
"format": "mp4",
"resolution": "hd"
}
}
There’s also a demo that gives you the code to do this: Picture in Picture Video Editor Demo — Shotstack