Position topLeft not working as expected

Shotstack API
1

I’m having trouble with the position topLeft property because even though I added it, the video seems to be pushed to the right and up whenever I set position to topLeft

{
    "timeline": {
        "fonts": [
            {
                "src": "https://...s3.amazonaws.com/fonts/font.ttf"
            }
        ],
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "audio",
                            "src": "https://...s3.amazonaws.com/audio/..mp3",
                            "effect": "fadeIn"
                        },
                        "start": 4.848526,
                        "length": 13.91864
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://..s3.amazonaws.com/test/video1.MOV"
                        },
                        "offset": {
                            "x": 0,
                            "y": 0
                        },
                        "position": "topLeft",
                        "fit": "none",
                        "start": 0,
                        "length": 4.848526
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://..s3.amazonaws.com/test/video2.MOV"
                        },
                        "offset": {
                            "x": 0,
                            "y": 0
                        },
                        "position": "topLeft",
                        "fit": "none",
                        "start": 4.848526,
                        "length": 4.407347
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://..s3.amazonaws.com/test/video3.MOV"
                        },
                        "offset": {
                            "x": 0,
                            "y": 0
                        },
                        "position": "topLeft",
                        "fit": "none",
                        "start": 9.255873,
                        "length": 5.011066
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://..s3.amazonaws.com/test/video4.MOV"
                        },
                        "offset": {
                            "x": 0,
                            "y": 0
                        },
                        "position": "topLeft",
                        "fit": "none",
                        "start": 14.266938999999999,
                        "length": 4.500227
                    }
                ]
            }
        ]
    },
    "output": {
        "format": "mp4",
        "size": {
            "width": 1080,
            "height": 1920
        },
        "fps": 30
    }
}

so that it looks like this

Screenshot 2023-03-28 061528
Screenshot 2023-03-28 061528526×694 92.4 KB

2

I’m having trouble working out what the problem is without having access to the source files. Please can you private message me with the real JSON with the file URLs or provide them here.

Everything should be working. I took your JSON, removed the fonts and audio clips and used a video smaller than the output with a fit of none. I set the position around the screen topLeft, topRight, etc… As you can see it works as expected:

{
    "timeline": {
        "background": "#00ffff",
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://s3-ap-southeast-2.amazonaws.com/shotstack-assets/footage/cat.hd.mp4"
                        },
                        "offset": {
                            "x": 0,
                            "y": 0
                        },
                        "position": "topLeft",
                        "fit": "none",
                        "start": 0,
                        "length": 4.848526
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://s3-ap-southeast-2.amazonaws.com/shotstack-assets/footage/cat.hd.mp4"
                        },
                        "offset": {
                            "x": 0,
                            "y": 0
                        },
                        "position": "topRight",
                        "fit": "none",
                        "start": 4.848526,
                        "length": 4.407347
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://s3-ap-southeast-2.amazonaws.com/shotstack-assets/footage/cat.hd.mp4"
                        },
                        "offset": {
                            "x": 0,
                            "y": 0
                        },
                        "position": "bottomLeft",
                        "fit": "none",
                        "start": 9.255873,
                        "length": 5.011066
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://s3-ap-southeast-2.amazonaws.com/shotstack-assets/footage/cat.hd.mp4"
                        },
                        "offset": {
                            "x": 0,
                            "y": 0
                        },
                        "position": "bottomRight",
                        "fit": "none",
                        "start": 14.266938999999999,
                        "length": 4.500227
                    }
                ]
            }
        ]
    },
    "output": {
        "format": "mp4",
        "size": {
            "width": 1920,
            "height": 1080
        },
        "fps": 30
    }
}

Here is the output video:

I think perhaps this might have something to do with the shape of the source videos, applying fit: none (i.e. use original size) and a vertical video.