Troubleshooting Shopify Horizon Split Showcase Videos: When Autoplay Fails

View original discussion by user4825 on Shopify Community →

When Your Shopify Horizon Split Showcase Videos Go Silent: A Community Deep Dive

Hey there, fellow store owners! Ever pour your heart into creating a stunning product video, only to find it stubbornly refuses to play on your Shopify store? It’s a frustrating experience, especially when you’re using a dynamic section like the Horizon Split Showcase to highlight your best content. Recently, we saw a great discussion pop up in the Shopify community about just this issue, and I wanted to share the collective wisdom. It’s a classic example of how a problem that seems complex often has multiple, surprisingly simple solutions.

The Case of the Silent Showcase Video

Our community member, user4825, brought up a common head-scratcher: their MOV and MP4 videos were loading fine elsewhere on their site, but in the Horizon Split Showcase section, the video just wouldn't play. The kicker? It worked perfectly on their tablet, but not on their laptop. This immediately pointed to a browser or local machine issue, rather than a fundamental problem with the video files themselves or the Shopify platform. Let's break down the solutions the community rallied around.

First Line of Attack: Your Browser Settings & Extensions

This is often the quickest fix, and it's where Eric from Shopplaza and Tim_1 correctly started. Many modern browsers, especially Chrome, have built-in features to block autoplaying media to improve user experience and save data. Browser extensions can also interfere.

Step 1: Test in Incognito or Guest Mode

Before you dive into settings, try this simple diagnostic:

  1. Open your Shopify store in an Incognito window (Chrome, Edge, Firefox) or Guest mode (Chrome).
  2. Check if the video plays in the Horizon Split Showcase.

If it works, you've narrowed it down! The problem is likely an extension or a specific browser setting in your regular profile. You can then disable your extensions one by one to find the culprit.

Step 2: Check Your Browser's Autoplay Settings

If Incognito mode doesn't help, or you suspect a general browser setting, it's time to dig into Chrome's site settings. Eric from Shopplaza provided excellent visual guidance for this:

  1. In Chrome, click the three dots in the top-right corner to open the menu.
  2. Go to Settings.
  3. Navigate to Privacy and security, then click on Site Settings.
  4. Scroll down and find Additional content settings, then click on Video.
  5. Ensure that the Default behavior is set to "Allow sites to play videos" or that your site isn't explicitly blocked.

Here are the screenshots Eric shared to guide you:

image
image

After adjusting, remember to reset your site or clear your browser cache and cookies, then recheck.

When It's More Than Just Your Browser: Diving into Theme Code

Sometimes, even with browser settings optimized, videos still refuse to autoplay reliably. This is often due to how browsers handle autoplay policies, especially if a video isn't muted. The community discussion highlighted a code-based solution from mastroke (with a helpful correction from tim_1) that can force videos to play.

Disclaimer: Editing theme code requires care. Always back up your theme before making any changes! If you're not comfortable with code, consider reaching out to a Shopify expert.

Modifying background-video.liquid for Autoplay

This approach involves adding a small JavaScript snippet to explicitly tell the browser to play the video once the page content is loaded. Here's how:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find your current theme, click Actions > Edit code.
  3. In the theme editor, search for the file named background-video.liquid. This file is often responsible for handling background videos or videos within specific components.
  4. Locate the existing block.
  5. Replace the entire content of that file with the following updated code. This code includes a JavaScript block that attempts to play any video with the class .custom-video, catching any errors if the browser blocks it.

 {% 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 key addition here is the