Hiding Overlays

Overview#

Modern web pages often include overlay elements that obscure content during scrolling — cookie consent banners, sticky navigation bars, floating chat widgets, and promotional popups. These elements can make a scrolling video cluttered and distracting.

Rollberry's --hide-selector option lets you remove these elements before the capture begins, producing a clean video of the page content.

rollberry capture https://example.com \
  --hide-selector ".cookie-banner" \
  --hide-selector ".sticky-nav"

How it works#

When you provide --hide-selector, Rollberry injects CSS into the page that sets display: none !important on the matching elements. This happens after the page loads but before the scrolling capture begins.

The elements are hidden visually but remain in the DOM, so they do not affect the page layout or trigger JavaScript errors from missing elements.

Common overlay patterns#

Here are CSS selectors for the most frequently encountered overlay types:

Cookie consent banners:

rollberry capture https://example.com \
  --hide-selector "#cookie-banner" \
  --hide-selector ".cookie-consent" \
  --hide-selector ".consent-dialog"

Sticky navigation headers:

rollberry capture https://example.com \
  --hide-selector "header.sticky" \
  --hide-selector ".fixed-header" \
  --hide-selector "nav.fixed"

Floating chat widgets:

rollberry capture https://example.com \
  --hide-selector "#intercom-container" \
  --hide-selector ".crisp-client" \
  --hide-selector ".drift-widget"

Newsletter popups and modals:

rollberry capture https://example.com \
  --hide-selector ".modal-overlay" \
  --hide-selector ".popup-newsletter"

Hiding multiple elements#

The --hide-selector flag is repeatable. You can provide it multiple times to hide different elements:

rollberry capture https://example.com \
  --hide-selector ".cookie-banner" \
  --hide-selector ".sticky-nav" \
  --hide-selector "#chat-widget" \
  --hide-selector ".modal-overlay"

Each selector is independent — if one does not match any element on a specific page, it is simply ignored without causing an error.

Finding the right selectors#

To identify which selectors to use for a specific page, open the page in your browser's DevTools and inspect the overlay elements:

1. Open the target URL in Chrome or another browser.
2. Right-click on the overlay element and select Inspect.
3. Note the element's id, class, or other attributes.
4. Build a CSS selector that targets that element.

Common patterns to look for:

Using attribute selectors#

CSS attribute selectors are powerful for matching elements that use dynamic class names (common with CSS-in-JS libraries):

# Match any element with "cookie" in its class name
rollberry capture https://example.com \
  --hide-selector "[class*='cookie']" \
  --hide-selector "[class*='consent']"

Handling third-party overlays#

Many overlays are injected by third-party scripts (analytics, chat, A/B testing). These often have predictable container elements:

Testing selectors with debug mode#

If you are unsure whether your selectors are working correctly, use --debug-frames-dir to inspect individual frames:

rollberry capture https://example.com \
  --hide-selector ".cookie-banner" \
  --debug-frames-dir ./debug-output

Debug frames save each frame as a PNG image. Open the first few frames to verify that the overlay elements have been removed before the scroll begins. See the Debugging guide for more details.