Vertical Video component // Preview issue

Get Help Design
1

Mobile only app

Hi all,

I bought the Vertical Video component in the marketplace and I’m running into some issues. I’m trying to use a single video loop as the background for my onboarding flow. Instead of navigating to a new screen (and switching to a new video loop), I want to keep everything on one screen and reveal the next onboarding “block” when the user taps Next.

My setup is: pressing Next updates a value (via a text input / hidden input), and that value is used to make the next block Sometimes Visible (conditional visibility).

However, I’m running into these issues:

  • Text disappears even though it’s on the top layer and the video component is behind it.

  • When I get it working, the onboarding blocks/screens don’t line up properly (alignment/position shifts between steps).

  • The video doesn’t fill the entire screen consistently (different device sizes / aspect ratio).

What I want is for these elements to remain fixed in the exact same position across all onboarding steps:

  • Next button

  • Progress component

  • Skip header - to let the user skip to the starting screen - updates logged in user as SeenOnboarding is true.

  • Background video (single loop that keeps playing)

Do you have a recommended approach in Adalo to keep one continuous background video while revealing onboarding steps, without layering issues, misalignment, or the video not covering the full screen?

One more question: in the Staging Preview, I can’t select different phone models (device frames/sizes). I saw this in Adalo tutorials, but I don’t see the option in my preview. Where can I enable or access the device model selector?

2

I FIXED IT MYSELF (and with ChatGPT hehehe)
In case anyone is interested in the fix :slight_smile:

I built a 4-step onboarding in Adalo as a single screen with a looping vertical background video and conditional visibility (steps switch based on a Logged-in User number field). I ran into two main issues:

  1. The background video loaded after the text/UI and then appeared to “cover” it, and the video wasn’t truly full screen in preview.
    Fix: Put the video in its own bottom BG_GROUP (not sticky), and keep all UI (progress, skip, content, next button) in a separate UI layer above it. Because the screen is always scrollable, I used a sticky HEADER_GROUP (progress + “Skip”) and a sticky FOOTER_GROUP (“Next/Start”) so these elements stay fixed while only the content scrolls. Also ensure the video is placed at x=0/y=0 with 100% width/height (and no extra containers/padding).

  2. A purchased progress bar component re-animated from 0% to the target value on each step change.
    Fix: Use a single progress component that is always visible and drive its percentage with a formula based on the step (e.g., onboarding_step * 25 for steps 1–4). This prevents remounting and avoids the “0-to-X” reset animation.

Outcome: smooth, stable onboarding with fixed UI, background video behind everything, and progress updating cleanly per step.