Hi,
I have a Beaver Builder page with a video as the background image in the hero section, with a fallback image in case the video doesn’t work. Is there a way to force the image to load, rather than the video, on mobiles?
Thanks
An option is for your row settings in Beaver Builder itself – under Advanced > Responsive Layout you could select Display on large devices only, or large and medium only.
Then create a second row identical except use the picture instead of the video and select the remaining smaller devices to display.
To make the change in Microthemer you would want to use the media query tabs to change the background but without a link to the page I can’t be more specific on what to target.
Hi Abland
thanks for the reply. I was wanting the video to not only not show, but to not load either. I’m fairly new to too much CSS so not sure if/how it can be done in CSS, or if I need to resort to another method.
Thanks
@Abland, thanks so much for picking this up while I was away 🙂
@stevehah Microthemer can only hide content that has loaded, as CSS just controls how things appear on screen. I suspect Beaver Builder’s responsive options for showing/hiding content on specific screen sizes also just hides content with CSS rather than conditionally loading content.
As far as I’m aware, a video background is achieved by adding some HTML code for a video, and then using CSS to position the video element behind the element that needs a video background. It isn’t achieved by setting the CSS background-image property to a video file, in case that’s what you were thinking. That would be nice though!
You could achieve this effect by writing some JavaScript code to dynamically add a video background on larger screens once the page has loaded, but this would be a custom solution that’s fairly technical. It’s not something you could use Microthemer for. And I don’t think Beaver Builder can help you with this either.
