Prevent Video Section from Loading on Mobile – Conditional Rendering Help

Support
#1

Hello Themeco Support,

I’m currently working on optimizing our homepage for performance and need clarification on how to properly conditionally render sections based on device type in Cornerstone.

Specifically, I have a desktop video hero section that should only load on desktop. For mobile, we have a separate image-based header. I’ve tried the following:

  1. Hiding the desktop video section using “Hide During Breakpoints” (works visually, but video still loads on mobile). The DOM shows it is still being loaded, I assume this is adding a display:hidden to that section.
  2. Using conditions such as {{dc:is.device}} is desktop and {{dc:global:device}} is desktop in the visual Condition builder (section still hides unexpectedly or does not evaluate correctly)
  3. Reviewed all available documentation on theme.co/docs, including the Parameters and Dynamic Content pages, but couldn’t find a supported way to detect device reliably via Conditions

Despite these attempts, the video is still loading on mobile and affecting LCP and overall performance scores . My main goal is to prevent the video from loading at all on mobile — not just hide it with CSS.

Could you please advise:

  • What is the officially supported method for rendering content conditionally based on device (desktop, tablet, mobile)?
  • Is there a documented dynamic content token or a method compatible with the visual Conditions builder that supports this?
  • If not, is this something that can be accomplished reliably with [cs_condition] , or would JS-based removal remain the only viable workaround?

I’m currently on Pro version 6.6.10 , and have confirmed this behavior across multiple devices and browsers.

Thank you for your guidance!

#2

Hi @tylerlukey,

Thanks for reaching out.
Currently, there isn’t a Dynamic Content tag available for detecting the device. However, this could be a good feature request for the future.
For now, you can create a custom dynamic content tag that returns whether the device is mobile or not. To achieve this, you can use the wp_is_mobile function and return the value within your custom dynamic tag.
Please go through the following article on this.


Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code/ links provided serve only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes, which means we can’t fix it in case it conflicts with something on your site, nor will we enhance it.
Further customization should be directed to a third-party developer, or you can avail One, where we answer the questions beyond normal theme support.

Thanks