Play button is all of a sudden appearing on all videos

Store Design
, ,

Topic summary

A Shopify store owner using the Fold Premium 2.1.0 theme encountered an issue where videos throughout their site stopped autoplaying and began displaying play buttons instead, including on a popup video.

Root Cause:
Browsers require videos to be muted for autoplay functionality to work properly.

Proposed Solution:

  • Add muted, autoplay, and playsinline attributes to video HTML elements
  • Implement JavaScript code that ensures all videos are muted and trigger autoplay on page load
  • Place CSS changes in base.css or theme.css under Edit Code → Assets
  • Add JavaScript to theme.js at the bottom

Current Status:
The issue appears to have resolved itself before implementation, though the user noted it was intermittent (play buttons appearing and disappearing randomly on page reloads). This inconsistency may indicate browser restrictions or lazy loading conflicts. The user was advised to test in incognito mode and clear cache if the problem returns.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hi, all of a sudden the videos throughout the store, including the initial pop up video, are not autoplaying and are instead requiring a play button to be pressed. please can someone help me change this. Thank you

Theme is fold premium 2.1.0 if this is relevant for css

2

Hey @DesignaLace ,

The videos aren’t autoplaying because browsers require them to be muted. To fix this, we’ll update the video settings.

Try adding this to your theme’s video code:

Also, add this JavaScript to ensure autoplay:

document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll("video").forEach(video => {
        video.muted = true;
        video.play();
    });
});

This should resolve the issue. Let me know if you need further help!

If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat

3

Hi, thank you for your reply.

Please could you let me know where specifically to type these css?

Would it be under a subcategory of the ‘edit code’ or directly into the css box of each video, or under theme settings CSS? Thank you :slightly_smiling_face:

4

Sometimes they actually disappear by themselves when I reload the page but seem to come back at random times

5

@DesignaLace ,

You can add the CSS in “Edit Code” → Assets → base.css (or theme.css, theme.liquid, depending on your theme structure).

For JavaScript, add it inside “Edit Code” → Assets → theme.js at the bottom.

If the issue is inconsistent (videos sometimes autoplay, sometimes don’t), it might be due to browser restrictions or lazy loading. Try clearing the cache and checking in incognito mode.

Let me know if you need further help!

Thanks

6

It seems to of resolved however it did resolve before I implemented this change, am I ok to reach out to you if it persists please?

7

Of course! Feel free to reach out anytime if the issue returns. I’m happy to assist whenever needed. :blush: