Dawn theme custom liquid video - different sizes on mobile and desktop

Topic summary

A user is trying to implement a custom liquid video section on their Shopify Dawn theme homepage that displays at different sizes on mobile versus desktop. They want to replicate the mobile video sizing they saw on another brand’s website.

Current Setup:

  • Using custom liquid code with CSS media queries
  • Video currently set to 100% width on both desktop and mobile
  • The existing code includes autoplay, loop, and muted attributes

Issue:

  • The current implementation doesn’t achieve the desired mobile appearance shown in their reference screenshots
  • Codes found online haven’t worked for their specific use case

Response:
A commenter suggests the solution requires building a new theme section with proper positioning (ensuring it stays behind the menu). They note the HTML structure is correct but needs refinement, recommending expert developer assistance for implementation.

Status: The discussion remains open with no concrete solution provided yet.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.

Hello,

Recently, we uploaded a video to the homepage of our website.
A few days ago, we came across this brand’s webpage. I wanted to change the custom liquid code, but none of the codes that I found worked.
So I would be grateful for a solution on how to make the video size on mobile like on the brand from the screenshot.
Here is the custom liquid code that I currently have:

video { display: block; margin: 0 auto; width: 100%; } @media screen and (max-width: 800px) { video { width: 100%; } }

This will need to build a new section into the theme and make sure it is always behind the menu. Some coding is needed which an expert can perform. Your HTML code is correct but needs refinement