Troubleshooting Shopify Horizon Split Showcase Videos: Why They Won't Play and How to Fix It

Hey everyone, your Shopify migration expert here, diving into a really common and frankly, super annoying, issue that popped up in the community forums recently: videos not playing properly in the "Horizon Split Showcase" section of a Shopify store. If you've ever spent hours perfecting a beautiful product video, only to find it stubbornly refuses to play on your site, you know the frustration! It’s one of those things that can really make you pull your hair out, especially when it works perfectly fine on one device but not another.

Our friend user4825 kicked off a thread because their Horizon Split Showcase videos weren't working. They'd tried MOV and MP4 formats, and the kicker was, they played fine on their tablet, but absolutely refused to cooperate on their laptop. Classic, right?

The Community's First Line of Attack: Browser Settings & Extensions

When something works on one device but not another, or in one browser but not a different one, it's almost always a clue that the issue might be on the viewer's end rather than a fundamental problem with your store's setup. This is exactly where the community started their troubleshooting.

Eric from Shopplaza, a helpful voice in the thread, immediately pointed to browser extensions or auto-play blocking settings in Chrome. He suggested trying the site in incognito mode or as a guest. Why? Because these modes typically disable extensions, giving you a clean slate to test if one of your browser add-ons is interfering with video playback. It’s a brilliant first step that often uncovers the culprit.

Another community member, tim_1, echoed this advice, suggesting incognito mode or even trying a completely different browser like Firefox if Chrome was giving trouble. And user4825's observation that the videos worked on their tablet but not their laptop really solidified this theory – it screamed "local browser issue!"

How to Check Chrome's Auto-Play Settings:

Eric from Shopplaza was super helpful and provided clear steps (with images!) on how to check those pesky auto-play video blocking settings in Chrome. This is essential for any store owner experiencing similar issues. Here’s how you can do it:

1. Open Chrome Settings: Click the three dots in the top-right corner of your Chrome browser, then select "Settings."
2. Navigate to Privacy and Security: In the left-hand menu, click on "Privacy and security."
3. Go to Site Settings: Under "Privacy and security," click on "Site Settings."
4. Find Sound/Video Settings: Scroll down to "Content" and look for "Additional content settings." You might find "Sound" or "Video" directly, or under "Additional content settings" find "Sound" or "Autoplay."
5. Adjust Autoplay: Ensure that settings aren't blocking autoplay for your site. You might need to add your store's URL to an "Allow" list.

Here are the images Eric shared:

When Browser Settings Aren't Enough: Diving into the Theme Code

Sometimes, it's not just the browser. Modern browsers have increasingly strict policies against auto-playing videos, especially if they have sound. This is to improve user experience and save bandwidth. So, even if your browser settings are fine, your theme's code might need a little nudge to tell the browser "Hey, this video is meant to autoplay, and it's muted, so it's cool!"

Parampreet jumped in with a direct code suggestion for sections/horizon-split-showcase.liquid:

{{ section.settings.video | video_tag: controls: false, autoplay: false }}

While this snippet is helpful for rendering a video, notice the autoplay: false. For a true auto-playing video, you'd want autoplay: true and often muted: true to satisfy browser policies. This might be a good starting point for a simple video embed, but perhaps not for the specific autoplay issue.

A more comprehensive solution came from mastroke, who suggested modifying the background-video.liquid file. This is often where themes handle background videos or showcase videos that are intended to autoplay. The core idea is to ensure the tag has the correct attributes and to add a JavaScript fallback to explicitly try and play the video.

Modifying background-video.liquid for Reliable Autoplay:

Disclaimer: Always back up your theme before making any code changes! If you're not comfortable with code, consider hiring a Shopify Expert or reaching out to your theme developer.

Here are the steps, based on mastroke's advice (and tim_1's helpful correction!):

1. Go to Edit Code: In your Shopify admin, navigate to "Online Store" > "Themes." Find your current theme, click "Actions," and then "Edit code."
2. Find background-video.liquid: In the left-hand file browser, search for background-video.liquid (it's usually in the Snippets or Sections folder).
3. Replace the Code: You'll need to replace the existing block with the updated code. The key additions here are playsinline, muted, and autoplay attributes directly in the tag, plus a JavaScript block to ensure the video attempts to play once the document is loaded.

Here's the corrected code snippet from the thread:

 {% liquid
   assign media_width_desktop = 100 | append: 'vw'
   assign media_width_mobile = '100vw'
   assign sizes = '(min-width: 750px) ' | append: media_width_desktop | append: ', ' | append: media_width_mobile
   assign widths = '240, 352, 832, 1200, 1600, 1920, 2560, 3840'
 %}
 {{ 
   background_video.preview_image
   | image_url: width: 3840
   | image_tag: width: 1100, widths: widths, sizes: sizes
 }}
 

The playsinline attribute is crucial for iOS devices, allowing videos to play within the browser window rather than full-screen. muted is almost a must for autoplay to work in many browsers, and autoplay tells the browser to try and play it automatically. The JavaScript video.play().catch(() => {}); is a robust way to attempt playback and silently handle any errors (like if a browser still blocks it). It's a common workaround to ensure maximum compatibility.

Now, I know what some of you might be thinking: "Code? Yikes!" And you're not alone. user4825 expressed the same sentiment, saying they were new to this and didn't want to mess with code. That's perfectly understandable! This is where the community really shines. devcoders, another helpful expert, offered to step in and fix the issue directly if user4825 shared collaborator access. Don't be afraid to leverage the expertise of others if code feels daunting – that's what the Shopify community is all about!

Wrapping It Up: Your Video Autoplay Checklist

So, if your Horizon Split Showcase videos (or any videos on your Shopify store, for that matter) are acting up, here's your go-to checklist based on this great community discussion:

1. Browser First: Always start by testing in incognito mode or a different browser. Check your browser's autoplay settings and disable any suspicious extensions. This is often the quickest fix!
2. Video Format: Stick to MP4. While MOV might work in some contexts, MP4 has broader browser support for web playback.
3. Theme Code Check: If browser issues are ruled out, it's time to look at your theme's video implementation. Ensure your tags have playsinline, muted, and autoplay attributes. Consider adding a JavaScript fallback like the one shown above to explicitly trigger playback.
4. Seek Expert Help: If code changes are outside your comfort zone, don't hesitate to reach out to a Shopify Expert, your theme's support, or post in the Shopify community for direct assistance. Providing collaborator access can often get you a quicker resolution.

It's always a journey, isn't it? Getting every element of your Shopify store to work perfectly takes a bit of detective work sometimes. But with the insights from our fantastic community, we can tackle these technical hurdles together. Keep those videos playing smoothly and your customers engaged!