Hello @EBOOST
Thank you for your help here.
I’ve added the code to my site but the controls to play, pause and turn the music on and off do not work. Can you please explain to me or send updated code so it works properly? I’ve also tried to make the videos load with the sound playing.
Thank you in advance!
Topic summary
A user seeks to display different videos for desktop (landscape) and mobile (portrait) on their Shopify Dawn theme homepage. They attempted using custom liquid sections with CSS media queries but encountered issues where both videos displayed on mobile.
Solution Provided:
- Another user identified a missing closing brace “}” in base.css
- Provided corrected CSS code using media queries:
- Desktop (min-width: 481px): shows landscape video, hides portrait
- Mobile (max-width: 480px): shows portrait video, hides landscape
- Code successfully resolved the original issue
Extended Discussion:
- Multiple users requested similar functionality for video banners (with text/buttons overlay)
- A GitHub repository was shared with updated liquid code for separate desktop/mobile video sections
- Subsequent refinements addressed:
- Autoplay functionality
- Container display options
- Mobile content positioning
- Video controls visibility
- Dark overlay issues
Current Status:
- Original issue resolved
- Ongoing requests for adaptations to different themes (Impact) and specific requirements
- Discussion remains active with users seeking customizations for their particular use cases