added video under header in shopify desktop but displaying differently on mobile view

Shopify Discussion

Topic summary

A Shopify store owner added a video background under the header using custom liquid code with a transparent header. The video displays correctly on desktop but appears misaligned on mobile—playing halfway between the header instead of properly positioned.

Technical Details:

  • Implementation uses custom liquid with autoplay, loop, muted, and playsinline attributes
  • Video hosted on Shopify CDN
  • Code includes inline styling for width and padding

Current Status:

  • Store URL provided for troubleshooting: cardmasters.com.au
  • User seeking guidance on how to fix the mobile display issue
  • No solution provided yet; discussion remains open

The issue likely stems from CSS positioning or responsive styling conflicts between desktop and mobile views that need adjustment in the custom liquid code.

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

hi all,

added a video instead off image background using custom liquid with transparent header. it shows fine in desktop view. when switching too mobile view the video plays halfway between the header. how do i fix this? current code i used on custom liquid too add video.

#openthinkingvideo { display:block; max-width: 100%; width: 100%; padding: 100; margin: 0 }

2

Hi @M_t ,

Can you please provide link to your store?

Thank you

3

sorry how do i do this

4

https://www.cardmasters.com.au/?_ab=0&_fd=0&_sc=1