How can I adjust the height and width of a video section?

Store Design

Topic summary

A user wants to reduce the size of a video section on desktop while keeping the mobile size unchanged. The video appears too large on desktop screens.

Initial Solutions Attempted:

  • Multiple helpers provided CSS code to be added above the </body> tag in theme.liquid
  • Early code versions caused centering issues and the video shifted right when played

Working Solution:
After several iterations, a CSS media query approach was provided that:

  • Sets the video width to 50% on desktop (screens wider than 768px)
  • Maintains 100% width on mobile
  • Keeps the video centered during playback
  • Uses max-width and margin: 0 auto for proper alignment

Current Status:
The original poster confirmed the solution worked. However, later commenters reported the code still doesn’t work for them, particularly with the “Spotlight” template, indicating the solution may not be universally applicable across different Shopify themes.

Note: One commenter criticized the quality and clarity of solutions being offered in these types of threads.

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

Please apply the code and message us. i will check what the issue on there.