How do i adjust the cama theme hero desktop and mobile video?

Shopify Discussion

Topic summary

A user is experiencing issues with a hero video in the Cama Shopify theme. After uploading a 1920x1080 (16:9) video for desktop, the bottom portion is being cut off by the header.

Proposed Solutions:

  • One responder provided custom CSS code to adjust video dimensions and aspect ratio for desktop screens (min-width: 770px), setting max-width to 500px and ratio-percent to 45%
  • Another suggested checking theme settings for video height/width/positioning controls, or modifying CSS/JavaScript if needed
  • A third requested to see the actual page with the cutoff issue for more accurate troubleshooting

Current Status:
The original poster expressed unfamiliarity with coding and asked for clarification on whether the provided CSS applies to desktop only or both desktop and mobile. The issue remains unresolved, with the user needing either simpler instructions or theme-based solutions that don’t require coding knowledge.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

i uploaded a 1920X1080 (16:9) video for the desktop video, but the video is cutoff from the bottom header. Please help? Thanks

1 Like
2

Hey there @happybeez25 You can try out this code but adjust the figures with what you’d like for your own video in the store

@media screen and (min-width: 770px) { .video-section__media.deferred-media{ max-width: 500px; text-align: center; --ratio-percent: 45%!important; margin: auto; } .video-section__media video{ max-width: 500px; height: auto!important; left: 0!important; } }

Let me know if this works for you!

1 Like
3

To adjust the hero video in the Cama theme for both desktop and mobile, check your theme settings for video height, width, and positioning options. If the theme doesn’t offer built-in controls, you may need to modify the CSS or use custom JavaScript to ensure proper scaling. Are you trying to resize, reposition, or swap out the video entirely?

1 Like
4

Hey @happybeez25 , can you please share the page with the cutoff video? Would be much easier to solve. If it’s password-protected, a password would be needed too.

5

thanks for the css code, but i am not familiar with coding. The codes you sent, is it applied for desktop or desktop and mobile?