Lower third overlay with headshot

I see that it’s possible to create an overaly lower third (and put text on it)

Is it possible to put a headshot in that lower third (via API) This would be one layer of base video plus headshot plus overlay

I guess i’m also wondering if I could put an overlay transition on the same clip (that would be 3 overlays on one clip)

It should be possible. There is no limit on the number of tracks/layers you can have, you just need to make sure they are in order like this:

Track 1: Text
Track 2: Headshot overlay
Track 3: Lower third
Track 4: Main video

I don’t see why this wouldn’t work although I’d have to mock it up to be 100% certain, but should be possible.

Thanks. I note the guide says that I can’t overlap clips.

How would I go about laying one overlay over 10 clips? do I have to create this overlay 10 times and overlay each clip, or can I only create it once and set it for the duration of the video?

You can’t overlay clips, but you can overlay tracks. Not sure if this is what you want to do but would the clips be in sequence but the overlay sits on top of all those clips? If that is the case then it should be fine to put the overlay in a track above the sequence of clips.

I mocked this up, it uses two clips in sequence, an overlay lower third animation with text on top of the lower third animation:

{
    "timeline": {
        "soundtrack": {
            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/music/unminus/berlin.mp3"
        },
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "html",
                            "html": "<p data-html-type=\"text\">MY TITLE HERE</p>",
                            "css": "p { color: #ffffff; font-size: 32px; font-family: Montserrat ExtraBold; text-align: left; }",
                            "width": 400,
                            "height": 80
                        },
                        "start": 1.2,
                        "length": 5.8,
                        "fit": "none",
                        "transition": {
                            "in": "slideRight"
                        },
                        "offset": {
                            "x": -0.2,
                            "y": -0.255
                        }
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/overlays/lowerthird-1.mov"
                        },
                        "start": 0,
                        "length": 7,
                        "fit": "none",
                        "scale": 0.65,
                        "offset": {
                            "x": -0.214,
                            "y": -0.292
                        }
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "image",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/images/wave-barrel.jpg"
                        },
                        "start": 0,
                        "length": 3,
                        "effect": "zoomIn"
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/footage/surfers.mp4"
                        },
                        "start": 3,
                        "length": 4
                    }
                ]
            }
        ]
    },
    "output": {
        "format": "mp4",
        "resolution": "sd"
    }
}

This is the final output: