Seamless Shopify Videos: Hide Controls & Overlays on Fabric & Horizon Themes

View original discussion by IMYOURGIRL on Shopify Community →

Hey everyone! As a Shopify migration expert, I spend a lot of time digging through the community forums, and let me tell you, it's a goldmine of real-world problems and clever solutions. Recently, I stumbled upon a fantastic discussion started by Kelly (username IMYOURGIRL) about a common pain point: getting those lovely looping background videos to play without obnoxious controls or overlays on Shopify's Fabric and Horizon themes. And, crucially, getting it to work on mobile!

Kelly's initial challenge was trying to hide video controls using a simple CSS snippet like video::-webkit-media-controls { display: none !important; }. While this often works wonders on desktop, as many of us have found, mobile browsers can be a different beast entirely. They tend to cling to their native video controls, making it tough to achieve that seamless, full-bleed visual effect we're all after.

Understanding the Mobile Video Challenge

The core issue, as the community discussion revealed, is that mobile browsers often override CSS attempts to hide video controls. This isn't just a Shopify thing; it's how many mobile operating systems handle embedded videos to ensure a baseline user experience. To truly hide those controls and overlays, especially on mobile, we often need to go deeper into the theme's Liquid code.

The community quickly rallied, with mastroke and tim_1 offering some excellent, multi-pronged solutions. What I loved about this thread is how it showcased both CSS overrides and crucial Liquid file modifications, giving a full picture of how to tackle this.

The Essential Fix: Removing the 'controls' Attribute in Liquid

This is the big one, especially for mobile. As mastroke highlighted, the most reliable way to prevent controls from appearing is to remove the controls attribute directly from the HTML element in your theme's Liquid files. This tells the browser, "Hey, don't show any controls for this video, ever."

Step-by-Step: Editing Your Theme's Video Snippets

  1. Access Your Theme Code: From your Shopify admin, go to Online Store > Themes. Find your current theme (Fabric or Horizon) and click Actions > Edit code.
  2. Locate Video Files: You'll want to look in files that handle video rendering. Common places include:
    • sections/video.liquid
    • snippets/video.liquid
    • sections/media-with-text.liquid (if your video is within one of these sections)
  3. Find the Tag: Search within these files for something like:
  4. Remove the controls Attribute: Replace that line (or just remove the controls word) with something like this, ensuring autoplay, looping, muting, and `playsinline` (crucial for mobile autoplay without fullscreen):

    Important: As tim_1 pointed out, this change will apply to all self-hosted videos using this specific video snippet. Make sure this is the behavior you want across your store.

A More Thematic Approach: Using disable_controls (If Available)

Some themes, like Horizon (and Fabric likely follows a similar pattern), have a built-in Liquid variable to handle this more gracefully. tim_1 pointed to lines in Horizon's video.liquid where a disable_controls parameter is used.

If your theme uses this, you'd typically find a Liquid block that looks similar to this, as shared in the thread:

  {% liquid
    if disable_controls
      assign c
      assign enable_js_api = true
    else
      assign c
      assign enable_js_api = false
    endif
  %}

Kelly mentioned that simply changing assign c> to assign c> in the else block in her video.liquid did the trick for her:

  {% liquid

    if disable_controls

assign c

assign enable_js_api = true

else

assign c

assign enable_js_api = false

endif

%}

This ensures that no matter if disable_controls is passed as true or false, the controls variable is always set to false, effectively hiding them. You might also want to look for the specific line (like line 118 in tim_1's example) where the controls variable is passed to the video_tag filter:

{{ video | video_tag: image_size: '2500x', autoplay: true, loop: video_loop, muted: true, controls: controls }}

Changing controls: controls to controls: false here would also achieve the same effect for self-hosted videos.

Hiding Overlays and Enhancing the Look with CSS

While the Liquid modification handles the actual video controls, you might still have theme-specific overlays (like a play button or darkened layer) that you want to hide. mastroke provided an excellent CSS snippet for this:

Step-by-Step: Adding Custom CSS

  1. Access Your Theme Code: (Same as above)
  2. Locate Your CSS File: Find your main CSS file, usually something like assets/base.css, assets/theme.css, or assets/theme.scss.liquid.
  3. Add This CSS: Paste the following code at the very bottom of the file (or in a custom CSS section if your theme has one):
    .video__overlay,
.video-section__overlay,
.deferred-media__poster,
.media__poster,
video::-webkit-media-controls {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
video {
  pointer-events: none;
}

    This snippet is quite comprehensive, targeting various common overlay classes used by Shopify themes and explicitly hiding the webkit media controls (though the Liquid fix is more robust for mobile). The pointer-events: none; is a nice touch to ensure users can't accidentally interact with the hidden video controls.

Optional Autoplay Fallback for Robustness

Sometimes, despite all the `autoplay` and `playsinline` attributes, a video might still hesitate to play on certain devices or browsers. mastroke shared a little JavaScript snippet to give autoplay a gentle nudge:

document.querySelectorAll("video").forEach(video => {
  video.play().catch(() => {});
});

You'd typically add this to your theme's main JavaScript file (e.g., assets/theme.js or assets/global.js) or within a