Play button is all of a sudden appearing on all videos

[DesignaLace]

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

[rajweb · Accepted solution]

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:

<video autoplay muted playsinline loop>
  <source src="{{ video_url }}" type="video/mp4">
</video>

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

[DesignaLace]

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 🙂 

[DesignaLace]

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

[rajweb]

@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

[DesignaLace]

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?

[rajweb]

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