If you’re still having trouble with this issue, I recommend adding this code right before the closing tag in the theme.liquid file. It works well without moving the video when it plays.
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 intheme.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-widthandmargin: 0 autofor 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.