Hide Video on mobile Version only

Store Design

Topic summary

A user seeks to hide a background video (positioned behind “Sport meets Design”) on mobile devices only while keeping it visible on desktop.

Proposed Solutions:

Three community members offered CSS-based approaches:

  • Solution 1: Targets .video__player video with display: none using a media query for screens up to 767px width

  • Solution 2: Similar approach targeting .video__player with display: none !important for screens up to 768px width

  • Solution 3: Appears incomplete/incorrect (targets mobile menu burger button instead of video)

Implementation Steps:

  1. Navigate to Shopify Admin → Online Store → Themes → Actions → Edit Code
  2. Open Assets → theme.css
  3. Paste the CSS code at the bottom of the file

Status: Multiple solutions provided but no confirmation from the original poster on which approach worked or if the issue was resolved.

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

Hi, how can I hide the video in the background behind Sport meets Design, but only on the mobile Version? Thank you!

https://qc3p791ywwxe10sl-69711397132.shopifypreview.com

2

In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.css and paste this at the bottom of the file:

mobile-menu__button–burger {
display: none;
}

3

Hi @domo2

let try to add this css:

@media screen and (max-width: 767px) {
    .video__player video {
        display: none;
    }
}
4

hello @domo2

1..Go to **Online Store > Themes > Edit code>**Assets > theme.css

add the code bottom of the file

@media only screen and (max-width: 768px) {
.video__player {
    display: none !important;
}
}

if its helpful please accept my solution .

thanks..