How do I display a different video for desktop and another for mobile with the Dawn theme?

Store Design

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
Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
6

Hello! Thanks for your reply. We haven’t launched it yet, it is password protected for visitors. Shall i e-mail the password for visitors to you?

We have added on the homepage a video section from template and tried to put the liquid code with the link of the video but it says that the sintax is wrong. I have tried all this on a copy but nothing worked. I have added the video as a property instead of a liquid code. Also tried to add custom css to the video but nothing, tried to change in html still nothing. Also it’s not playing on loop without having to press play.

homepage.jpeg
homepage.jpeg1600×613 45.4 KB