How to clean the browser popups out of a screen-recorded demo

Last updated 2026-09-01 · 8 min read

What is the short version?

Every screen recording of a web application contains things that are not your application: a sign-in prompt, an offer to save the password, a notification. They are the only reason the recording looks amateurish, and they are removable.

1. Go to Vizard Agent and upload the recording.
2. List the steps of the flow that must survive, in order.
3. List the interruptions to remove — popups, waiting, aimless mouse movement.

What do you need before you start?

The recording itself and the flow written out step by step. Vizard Agent will not reorder or quietly shorten your demonstration once you have listed those steps, which matters a great deal when the video is going to be marked or formally reviewed rather than simply watched.

• The recording. Uncut, as captured.
• The flow. Every step, in the order shown.
• The interruptions. Named, so nothing else goes.
• What to emphasise. Which parts of the interface matter.
• The pace. Tidy, but not rushed.

What do you type into Vizard Agent?

Say what must not change at least as clearly as you say what should go. Vizard Agent will otherwise set about improving the pacing on your behalf, and a demonstration that has been sped up or resequenced is no longer a demonstration of what actually happens when someone uses the thing.

Prompt

Variants worth knowing:

• Name each popup. They are specific, so name them.
• "Do not reorder." Essential when it is being marked.
• "Not on every mouse move." Otherwise the zoom is seasick.

What does Vizard Agent actually do?

Here is the order Vizard Agent worked in on a real portal demonstration recorded for a university thesis defence. Almost every step is a measurement of when something appeared or disappeared, because a popup has to be cut to the frame or its edge flickers.

1. Checks the recording's duration and format.
2. Analyses the visual shots and checks whether there is any narration.
3. Builds a contact sheet of key frames to understand the interface and the flow.
4. Extracts frames around the sign-in popup to time its appearance and disappearance precisely.
5. Analyses the frame differences at the start to detect exactly when that popup arrives.
6. Extracts the email-typing frames to find when manual typing begins.
7. Compares the login screen before and after the popup closes.
8. Measures the average pixel intensity of the email and password fields to detect the typing.
9. Extracts the login-to-dashboard transition to time the click and the page load precisely.
10. Identifies the frame the dashboard first appears by measuring pixel difference against the previous screen.
11. Crops the top-right corner to analyse the save-password popup separately.
12. Measures the mean and standard deviation of that corner to track when the popup shows.
13. Builds a comparison sheet of those crops and reviews it.
14. Tracks the mouse movement and click timing on the profile button.
15. Analyses frame-to-frame differences across the whole video to find every page transition.

Step twelve is the neat one. Rather than watching for the popup, Vizard Agent measures the statistical behaviour of the corner of the screen where it appears — so its exact in and out frames come out as numbers.

What does the result look like?

The recording this page is written from measured 1892x922 at 30fps and ran 62.5 seconds. The finished demonstration keeps the same interface, the same seven steps in the same order, and the same real interactions — minus the sign-in prompt, the password offer, the waiting and the stray mouse movement.

The zooms are selective. Each one lands on the part of the interface being demonstrated at that moment and nowhere else, which is what separates a professional demonstration from a recording with a zoom effect on it.

When does this not work well?

Removing interruptions is surgery performed on a single continuous recording, and it turns out that a few of those interruptions are quietly load-bearing. These are the cases where cutting them out costs you considerably more than simply leaving them where they are.

• Popups mid-interaction. Cutting them cuts the action.
• Very short recordings. Little slack to remove.
• Interruptions that matter. A real error message should stay.
• Something you needed to show. Say what must survive.
• Personal data on screen. That is a separate blur pass.

How do you fix a result that came back wrong?

Name the step in the flow that is wrong. Vizard Agent keeps the measured in and out frames for every popup and every page transition it found, so a restored moment or a re-timed zoom is a straight re-render rather than another full analysis pass.

• "You cut a real click." Restored from the interaction map.
• "The zoom is too aggressive." Reduced and applied to fewer moments.
• "That popup is part of the flow." Kept, and the rest re-cut.

How does Vizard Agent compare to doing it yourself?

By hand this means scrubbing frame by frame to find where a popup starts and ends, six or seven separate times, and it is exactly the job people abandon and re-record instead. Vizard Agent measures the frames rather than hunting for them.

Common questions

Will it change my interface? No. Vizard Agent leaves the design, colours, fonts and layout exactly as recorded.

Can it remove cookie banners too? Yes. Vizard Agent treats any recurring popup the same way.

Will it keep my steps in order? Yes, if you say so. Vizard Agent will not resequence a demonstration.

Can it cut the loading time? Yes. Vizard Agent shortens the waits without removing the interactions around them.

What about the mouse? Aimless movement goes. Vizard Agent keeps the movement that leads to a click.

Will it add zooms? Selectively. Vizard Agent zooms only on the element being demonstrated.

Is this suitable for an assessment video? That is where it came from. Vizard Agent preserves the flow exactly, which is what an examiner needs.

Can it add narration? Yes, if there is none. Vizard Agent can also caption an existing one.

What if a popup is mid-click? It will say so. Vizard Agent flags interruptions that cannot be cut cleanly.

Does it blur personal data? That is a separate request. Vizard Agent can do both in one pass if you ask.

Why not just re-record? Because the popups come back. A save-password prompt appears on a fresh profile too, and re-recording usually produces a different interruption rather than none.

Can it work on a mobile app recording? Yes. Vizard Agent handles system alerts and notifications the same way.

Does it check the result? Yes. Vizard Agent reviews the cut points and the transitions before rendering.