Your site on screen, not its cookie banner

A PageToVid film records the real site in a real browser. That browser arrives fresh, so it meets everything a newcomer meets: consent banners, newsletter pop-ups, chat bubbles. A person dismisses them in a second; a recording keeps them for the whole take.

A consent banner is the most distracting of all. It covers a large part of the page, it sits on top of the content we want to show, and it speaks the site's own language in the site's own colours, so it looks like part of the product. A banner in every shot quietly becomes the subject of the film.

Our recorder already closed banners before filming by looking for a button with a familiar label. A French page this week showed us that a familiar label is not enough.

When we looked closely, there were three separate gaps, each enough on its own to keep a banner on screen.

• The wording. Our list knew the French "Accepter", but this banner said "Autoriser". To a person they mean the same; to an exact match they are strangers.
• The frame. We searched the main page only. Many consent services draw their banner inside an iframe, a small page within the page. A search of the outer page cannot see a button inside it, however good the word list is.
• The fallback. When no label matched, nothing else happened, and the banner stayed.

The second gap is the instructive one. A perfect word list would still have missed, because it was looking in the wrong document.

We closed each gap on its own terms, so that any one layer can save the shot when the others cannot.

1. 1More words, in more languages. We added "Autoriser" for French, "Verstanden" for German and "Entendido" for Spanish, next to the variants we already knew. These are the words real consent buttons use, not the words a dictionary suggests.
2. 2Every frame. The dismiss step now searches every frame on the page, so a banner served from inside an iframe is found and clicked like any other.
3. 3A quiet backstop. If clicking still fails, the recorder adds a small stylesheet that hides the banners of well-known consent services by their known names.

We checked it on the very page that had kept its banner: it was clicked away before the first frame was recorded.

The tempting shortcut for the backstop is a broad rule: hide anything whose name contains "cookie" or "consent". It would catch more banners, and we chose not to ship it.

A broad rule does not know what it hides. A recipe site uses the word cookie everywhere. A privacy page has a consent section that is exactly what a film about it should show. A rule that fires on a fragment of a word would silently remove real parts of someone's page, and nobody would notice; the film would simply be missing something.

So the backstop hides named consent services and nothing else. When we meet a banner we do not know yet, we would rather add it by name than guess and erase genuine content.

For you, the change is simple: your film opens on your page. The hero, the product, the offer, not a request to accept cookies. It works whether your site speaks English, French, German or Spanish, and whether your consent service draws its banner on the page or inside a frame.

It also shaped how we think about recording the real web. The web a newcomer sees is not the web a developer sees after dismissing everything once, so the recorder is built for that first visit, in every language we film. And defences that fail in different ways make a strong team: a word list misses new wording, a frame search misses odd structures, a stylesheet misses unknown services, but together they cover each other.

See what the recorder does on the features page, or paste an address on /new and watch it open on the page itself.