When I use this code in a custom html all my videos on the website disappear

Shopify Discussion

Topic summary

A Shopify user is experiencing an issue where custom CSS code intended to hide a specific video on mobile devices is instead hiding all videos across their website.

The Problem:

  • User added CSS with a media query targeting mobile screens (max-width: 768px) that sets display: none on video elements
  • While the code successfully hides videos on mobile, it affects all videos site-wide rather than just the targeted one

Current Status:

  • GemPages support confirmed the code is causing the issue and provided a code snippet as a potential fix (details obscured in the conversation)
  • The user clarified their intent: they want only one specific video hidden on mobile, not all videos
  • The discussion remains open as the user seeks a solution to target only the desired video while preserving others
Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

Hi when I use this code all of my videos on the side disappear when I’m on mobile how do I fix this?

this is the code Thanks!

video { margin: 0 auto; width: 100%; height: 100%; } @media screen and (max-width: 768px){ video { display: none !important; } }
2

Hello @Zetterman

Because this code hide video on mobile

GemPages_0-1668761178759.png
GemPages_0-1668761178759.png902×461 23.8 KB

You can use this code (I fixed from your code)

I hope the above is useful to you.

Kind & Best regards,
GemPages

3

Hi I’m sorry if I was unclear but I want the video to be gone on mobile but all my videos on the website disappear when I use this code and not just the one I want?