Mastering Shopify Video: How to Hide Controls & Overlays on Fabric & Horizon Themes
Hey fellow store owners!
Ever wanted to add a beautiful, looping background video to your Shopify store, only to be frustrated by those pesky play/pause controls or an overlay that just won't disappear? Especially on mobile, right?
It's a common headache, and it recently came up in a fantastic discussion on the Shopify community forums. Our friend Kelly (known as IMYOURGIRL in the thread) was wrestling with this exact issue on her Fabric theme – a part of the popular Horizon theme family. She wanted her videos to play seamlessly on loop, without any distractions, and found that while she could get it working on desktop, mobile was a whole different beast.
Let's dive into what the community came up with and how you can achieve that clean, control-free video experience on your own store.
Understanding the Challenge: Why Videos Get Stubborn
Shopify themes, especially modern ones like Fabric and Horizon, are designed with a lot of built-in functionality. This often includes default video players that, for accessibility and user control, include play/pause buttons, progress bars, and sometimes even overlay elements. While usually helpful, these can get in the way when you're aiming for a purely aesthetic background video.
Kelly's initial attempt with video::-webkit-media-controls { display: none !important; } was a good start for desktop, but as many of us have experienced, mobile browsers have their own rules. They often force controls or prevent autoplay in ways desktop browsers don't.
The Community's Solutions: A Multi-Pronged Approach
The beauty of the Shopify community is how everyone jumps in to help. We saw a couple of excellent strategies emerge to tackle this, combining Liquid code changes, CSS, and even a touch of JavaScript.
Option 1: Tweak the Liquid Video Logic (The Programmatic Way)
One of the first suggestions, championed by mastroke and clarified by tim_1, involved digging into your theme's video.liquid snippet. This file is often responsible for how your theme renders video elements, whether they're self-hosted or from platforms like YouTube or Vimeo.
The core idea here is to ensure that the controls attribute is explicitly set to false when the video is rendered. Look for a Liquid block similar to this within your video.liquid file:
{% capture video_iframe %}
{% endcapture %}
{% else %}
{% liquid
if disable_controls
assign c
assign enable_js_api = true
else
assign c
assign enable_js_api = false
endif
%}
As Kelly discovered, simply setting assign c> in both the if and else branches of this block can make a big difference. This tells the theme not to include the controls parameter when generating the video tag.
Tim_1 also pointed out checking where {% render "video", disable_controls: XXX %} is called in your theme and ensuring that disable_controls is set to true. This is how the theme would ideally pass the instruction to hide controls.
Additionally, for self-hosted videos, you might find a line similar to this one (often around line 118 in a standard video.liquid snippet, as tim_1 noted):
{{ video | video_tag: image_size: '2500x', autoplay: true, loop: video_loop, muted: true, controls: controls }}
Here, you'd want to change controls: controls to controls: false directly. Just be aware, as tim_1 cautioned, this change will apply to all self-hosted videos using this snippet.
Here's a visual of what mastroke suggested for the initial Liquid change:
Option 2: The Full Control Method (CSS + HTML Attribute Removal)
While the Liquid tweaks are great, sometimes you need a more forceful approach, especially for those stubborn mobile controls. Mastroke provided a comprehensive, multi-step solution that tackles overlays, controls, and even potential autoplay issues.
Step 1: CSS to Hide Overlay Layers
Many themes use custom overlay elements on top of videos. To get rid of these, you can add some CSS to your theme's stylesheet (usually base.css or theme.scss.liquid, depending on your theme version).
.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 targets common overlay classes and the browser's default media controls, ensuring they're completely hidden. The pointer-events: none; for the video itself prevents users from interacting with it, which is perfect for a background video.
Step 2: The Critical Fix for Mobile – Remove the controls Attribute
This is often the missing piece for mobile devices! Even if you set controls: false in Liquid, some browsers might still render them if the controls attribute is present on the actual HTML tag. You need to remove it completely.
You'll need to go into your theme's code editor (Online Store > Themes > Actions > Edit code) and look for files that render video elements. Common places include:
sections/video.liquidsnippets/video.liquidsections/media-with-text.liquid(if your video is within a text section)
Search for lines containing
Replace it with something like this:
The key here is the complete removal of the controls attribute. Adding autoplay loop muted playsinline ensures the video behaves as a background element: it starts automatically, loops indefinitely, plays silently, and importantly, playsinline allows it to play directly within the page on iOS, rather than going full-screen.
Step 3: Optional Autoplay Fallback (JavaScript)
Sometimes, despite all our efforts, browsers (especially on mobile) might still resist autoplaying videos due to their policies to conserve data or prevent annoying user experiences. If you find your video isn't reliably autoplaying, you can add a small JavaScript snippet to gently nudge it.
You can add this to your theme's main JavaScript file (often theme.js or within a