Why is my CSS video size too large on desktop?

Technical Q&A

Topic summary

CSS sizing problem for a Shopify product-page video: the video looks correct on mobile but appears too large on desktop, and the width/height settings in the <video> tag are not having the expected effect. The shared code uses width="100%" and height="auto" with autoplay, muted, loop, and playsinline.

Key points raised:

  • The main issue is responsive sizing on desktop.
  • One reply suggests hosting the video on YouTube or Vimeo instead, arguing those platforms handle responsive video more easily.
  • The same reply asks for the website URL to inspect the page and provide CSS-specific help.
  • Another reply also requests the store URL privately to check the setup and suggest a solution.

Current status:

  • No concrete CSS fix was provided in the discussion.
  • The conversation remains open and unresolved.
  • The next action proposed was sharing the store/site URL privately so others could inspect the page structure and identify why the video dimensions are being overridden or ignored.
Summarized with AI on March 8. AI used: gpt-5.4.
1

Hey,

i have uploaded a video to my shopify library and i have installed a code to my product template.

The code works but the size of the video on desktop is way too big (on phone it looks good). The values for height and width do not work, i have tried “%” and “px”.

This is the code

why do commands for height and width not work?

2

It’s better to host a video on Youtube or Vimeo because it allows you to have a responsive video. Also, it’s recommended.
Please share your website URL so I can assist you with some CSS in this case.

3

i have sent you a private message with the website link

4

Hi @User2342 ,

Hope you are doing well. Can you please share your store URl via private message? So I can check and give you best solution for your question.

Greetings,

LitExtension Team