How to hide video controls for Safari desktop & mobile

Technical Q&A
, , , ,

Topic summary

Safari shows video controls during initial page load on a Shopify Atelier theme; prior WebKit-targeted CSS had no effect. The goal is to hide controls, replicating how hero.liquid handles videos.

Recommended approach: explicitly render the video via Shopify’s Liquid video_tag filter with controls: false. Also include autoplay: true, loop: true, muted: true; muted is crucial because Safari may force controls if autoplay with sound is blocked. Class and data-testid attributes do not influence control visibility.

Troubleshooting notes:

  • If controls still appear, Safari might be reacting to a failed autoplay (e.g., not muted) or a video source issue.
  • Check for JavaScript that re-enables controls after render.
  • Verify no CSS is undoing hidden controls.

Context: Liquid is Shopify’s templating language; video_tag outputs an HTML5

Additional input asked whether Safari-specific CSS was tried (it was, without success).

Status: No confirmed fix yet. Next steps are to update media-with-content.liquid to include controls: false and muted: true, then audit JS/CSS and validate the video source/autoplay behavior.

Summarized with AI on December 10. AI used: gpt-5.
1

I am using the Atelier theme and Safari is displaying the video controls during the page load and I want to hide them. I tried addressing this through the css webkit with no affect.

One option I want to approach is through the liquid and replicating the way the hero.liquid conceals the controls from the start.

The code for the Hero.liquid section is:

{%- if media_1 == 'video' -%}
    <div class="{{ video_wrapper_desktop_class }}">
      {{
        section.settings.video_1
        | video_tag:
          poster: nil,
          autoplay: true,
          loop: true,
          controls: false,
          muted: true,
          class: media_video_desktop_class,
          data-testid: 'hero-desktop-video-1'
      }}
    </div>
  {%- endif -%}

I have tried to replicate this in the media-with-content.liquid but I’m probably getting the class and testid variables wrong. Also, I’m not totally sure this would work anyways. If someone could please advise towards a solution that would be much appreciated.

Thanks in advance!

1 Like
2

The `controls: false` attribute on the `video_tag` filter is definitely the correct way to hide the video controls, as you’ve seen in the `hero.liquid` section. Safari can be particular, but this attribute should override the default browser controls.

You’ll want to make sure that the `video_tag` filter in your `media-with-content.liquid` section also explicitly includes `controls: false`. The `class` and `data-testid` attributes won’t affect the visibility of the controls themselves, only `controls: false` does that.

Find where you’re rendering the video in `media-with-content.liquid` and ensure your `video_tag` looks something like this:

{{
section.settings.your_video_setting_name
| video_tag:
poster: nil,
autoplay: true,
loop: true,
controls: false,
muted: true,
class: 'your-video-class',
data-testid: 'your-video-testid'
}}

The `autoplay: true`, `loop: true`, and `muted: true` attributes are also important, especially `muted: true`, as many browsers (including Safari) will prevent autoplaying videos with sound unless they are muted or the user has interacted with the page. If `controls: false` is present and it’s still showing, sometimes it’s because the browser is forcing controls if autoplay fails or if there’s an issue with the video source itself.

If `controls: false` is already there, double-check that there isn’t any JavaScript on the page that might be re-enabling controls, or CSS that’s overriding `display: none` for the controls. However, the Liquid attribute is the most robust way to handle this.

Hope that helps!

3

@teelstudio hello, did you try css for safari?