Video backgrounds allow you to create an immersive, visually dynamic environment that supports your interactive storytelling. When paired with custom design elements, background videos can help boost completion rates and drive deeper consumer interaction.
Before you begin
Gather your desired color overlays or gradient assets if you plan to apply custom styling.
Ensure your video meets the recommended design specifications.
Add a video background to one screen
From the Editor, select the screen you want to add the video background to.
Click the background area of the screen.
In the editor window, select the media upload icon.
Double click the video you want to use.
The video is added to the background.
Modify playback speed
To slow down or speed up a video:
Hover over the background
Select the kebob menu > Playback speed
Choose the speed.
The video automatically adjusts.
Adjust video audio
To adjust the audio:
Upload a video with sound.
Hover over the background video.
Click the speaker icon to mute or unmute the audio.
Click and drag the level indicator to turn the volume up or down.
Note that audio does not play automatically and users will have to press play to hear it.
Next steps
View your experience in desktop and mobile to ensure video playback performs smoothly.
Confirm that your text remains readable with any video and overlay combination.
FAQ
Will the video autoplay?
Yes. It autoplays and loops continuously without user action.
What is the video size limit?
The optimal video file size is 5 MB, with a maximum allowed size of 10 MB.
How do I remove and replace a video in my experience?
To replace a video in your experience, click the X next to the existing media in the left-hand menu to remove it. Then, use the upload icon to add your new video file. If you're setting the video as a background, ensure it meets the recommended dimensions and format for optimal display.
What video dimensions should I use to optimize background video playback on mobile and desktop?
To ensure your background video plays well on both desktop and mobile devices, upload separate versions for each platform. Use a 1920 x 1080 px (landscape) video for desktop and a 750 x 1334 px (portrait) video for mobile. This avoids layout issues and ensures the video appears correctly across screen sizes. Make sure to assign each version to the appropriate display setting when configuring the background video.
How do I make the “Next” button appear only after a video has finished playing?
To ensure that the "Next" button appears only after a video finishes playing, add a delay to the button that matches the full duration of the video in seconds. For example, if your video is 4 minutes long, set the button delay to 240 seconds. This will prevent users from skipping ahead. You can configure this delay in the button settings under Animation> Delay (Seconds). Be sure to test the timing in preview mode to confirm the button appears as expected before publishing your experience.