Video Element Showing Blank on Either Desktop or Mobile – Possible Caching Conflict (Two-Video Setup per OS)

1

Hi everyone,
I’m running into a recurring issue with the Bricks Video element on a homepage hero section where I have two videos configured — one for desktop (Windows/macOS) and one for mobile (iPhone/Android).

Each video block is conditionally displayed based on Operating System using Bricks conditions (as shown in the screenshots).
However, only one device type properly loads the video at any given time — either it displays fine on desktop but shows blank on mobile, or vice versa.

When I clear the cache (via WP Rocket or Kinsta), the issue temporarily disappears but returns after a few hours.
It seems to be related to how caching interacts with nonces and the conditional rendering, but I want to confirm if I’m missing something in Bricks configuration.

Environment Details:

  • Theme: Bricks Builder (latest version)
  • Hosting: Kinsta (Edge caching enabled)
  • Caching plugin: WP Rocket (page caching disabled by Kinsta)
  • Setup:
    • Two <video> elements inside the hero section
    • Each video has OS-based display conditions (Windows/macOS for desktop; iPhone/Android for mobile)
    • object-fit: cover styling applied via CSS

Issue Behavior:

  • After a few hours of caching, one video (usually the one not initially visited) fails to load.
  • Console sometimes shows 403 admin-ajax.php errors.
  • Clearing the cache or disabling optimization temporarily fixes it.
  • Tested with and without “Delay JavaScript Execution” (WP Rocket); no consistent improvement.

What I’ve Tried:

  • Reduced Kinsta cache lifespan (8–10 hours)
  • Disabled JS optimization and safe mode in WP Rocket
  • Purged all caches multiple times
  • Duplicated the video sections to test conditions separately
  • Confirmed both video sources are accessible and load correctly when conditions are removed

Questions for the Bricks Team:

  1. Is there any known issue with OS-based conditions and video elements being cached improperly (nonce or AJAX related)?
  2. Would Bricks recommend using user agent detection differently — or should the logic be handled via custom JS instead?
  3. Is there a preferred method to ensure conditional videos don’t get cached incorrectly per device?

Attachments:

  • Screenshot 1: Desktop video setup (Windows/macOS)
  • Screenshot 2: Mobile video setup (iPhone/Android)

Thanks in advance for your help — I just want to confirm whether this is a Bricks configuration issue or something that must be handled fully via server/caching exclusions.

— Jelena Radic

5a643aa2-709a-473d-8c48-0d095014f68f
5a643aa2-709a-473d-8c48-0d095014f68f1916×787 78.7 KB

41eb3f74-6328-4da6-b081-2bde94c7dca3
41eb3f74-6328-4da6-b081-2bde94c7dca31886×711 76.3 KB

2

You can use breakpoints and display:none in the css box to select by screensize.
Is the video on your wordpress or external? If its on your wordpress you can probebly open it in media and disable cache for it.

As it happens after a while there might be some crawler in the caching system that wants to optimise it.

3

Thanks for the tip!
Yes, the videos are hosted locally in WordPress media, so I’ll try disabling caching for those files specifically to see if that helps.

I’m intentionally not using breakpoint-based display (display:none) because the goal was to optimize for page speed and load size — removing the hidden video from the DOM entirely (using Bricks conditions) reduces unnecessary network requests.

Appreciate your suggestion — I’ll test with caching disabled for the media files and report back.

4

Funny you say that because i was thinking the same thing! though the Bricks teams says that display:none is the correct way to seperate mobile and non mobile making me switch.

I also keep running into cache issues like svg size and stuff. Somehow it does not like rem sizes running litespeed and the servers caches css and js by default.

Bricks CSS loading method - external files works best on my website