Hi @Raj-webdesigner ,
Is there a way that a static background image can load within the hero video section while the user waits for the Hero video to load. I have been doing some tests and it is a little slow to load.
Topic summary
A user needed to display different hero videos for desktop and mobile viewports on their Bionicgym.com site using the Impulse theme, hiding each version on the opposite device.
Initial Problem:
- CSS code attempts weren’t working despite following multiple guides
- The code had syntax errors including missing closing braces
Solution Provided:
Multiple contributors offered CSS media query solutions. The working code from Raj-webdesigner uses:
@media screen and (max-width:767px)to hide desktop video on mobile@media screen and (min-width:768px)to hide mobile video on desktop- Targets specific Shopify section classes
Follow-up Issues:
- Page-specific targeting: Initial code only worked on homepage due to index-specific class names. Updated to use
:nth-child()selectors for broader application across multiple pages. - Loading optimization: User asked about adding a static background image while the hero video loads, as current implementation causes slight delays during testing. This question remains unanswered.
Status: Core hiding functionality resolved; loading performance optimization still open for discussion.