I cannot get my videos to be put in the back. The text is always behind the video. Is there no Z-Order?

Shotstack API
1

Hi,

The video is always in front. After working at it for a day or so, I cannot figure out how to send videos to the back.

This is what I have in my video processor

const timeline = {
    background: '#000000',
    tracks: [
        videoTrack,
        audioTrack,
        textOverlayTrack
    ]
};

And this is my server.

    // Process video with Shotstack
    console.log('Processing video...');
    const processedVideo = processVideo(videoClips, script, highlights, style, audioUrl, audioDuration, aspectRatio, theme);
    console.log('Video processed successfully');

    // Create final video with Shotstack
    console.log('Creating final video...');
    const renderId = await shotstack.createVideo(processedVideo, API_KEYS.SHOTSTACK_API_KEY);
    console.log('Video render queued. Render ID:', renderId);

    // Poll for video completion
    console.log('Polling for video completion...');
    const videoUrl = await shotstack.pollRenderStatus(renderId, API_KEYS.SHOTSTACK_API_KEY);
    console.log('Video rendering completed. URL:', videoUrl);

    res.json({ script, audioUrl, videoUrl, aspectRatio, theme });
} catch (error) {
    console.error('Error creating video:', error);
    res.status(500).json({ error: error.message });
}

A Z-order would be great to have in the API

2

Tracks are rendered in the order provided, so it looks like you have them the wrong way around. I’d order them like this:

const timeline = {
    background: '#000000',
    tracks: [
        textOverlayTrack
        videoTrack,
        audioTrack
    ]
};

Now the textOverlayTrack is first in the array and should render on top of of the video. The audio is invisible so it doesn’t really matter where that goes.

3

Thank you that worked.