Auto Play Embedded Videos - Product Page & Product Card

[TanIQ]

Hi all,

So far i have managed to make product videos on the product pages to autoplay but only on desktop. Is there any code or way of making it work for mobile devices?

I'd also like to have auto play videos on the product card which is on my home page so that people can see the product in action without having to click "play"

I've looked everywhere. There are similar solutions but nothing that has worked for me.

Theme is Sense

[rajweb]

Hey @TanIQ ,

To enable autoplay videos on mobile devices, you might try a JavaScript-based approach. Some mobile browsers prevent autoplay with sound, so ensure that videos are muted. Here's a code snippet to autoplay videos on both desktop and mobile devices:

1. Autoplay on Product Pages (Desktop and Mobile):

Add this JavaScript to ensure the video autoplays when muted:

document.addEventListener("DOMContentLoaded", function() {
  const videos = document.querySelectorAll('.product-video');

  videos.forEach(video => {
    video.muted = true;
    video.play().catch(error => {
      console.error("Autoplay failed:", error);
    });
  });
});

2.  Autoplay on Product Cards (Homepage):

For the product cards, add similar code, ensuring videos are muted and have the  autoplay ,loop, and playsinline attributes. Add this to your theme's JavaScript file or in-line Javascript:

document.addEventListener("DOMContentLoaded", function() {
  const productCardVideos = document.querySelectorAll('.product-card-video');

  productCardVideos.forEach(video => {
    video.setAttribute("autoplay", "");
    video.setAttribute("loop", "");
    video.setAttribute("muted", "");
    video.setAttribute("playsinline", "");  // Important for mobile

    video.muted = true;
    video.play().catch(error => {
      console.error("Autoplay failed on product cards:", error);
    });
  });
});

Let me know if this approach works for you or if you need further customization!

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 Sharma

[TanIQ]

Thank you for the prompt response! Should i add this code into theme.liquid file or base.css? 

[rajweb]

@TanIQ ,

You're welcome! The code should go into a JavaScript file rather than CSS. Here’s how you can add it:

Add JavaScript in theme.liquid:

1. Go to Online Store > Themes > Edit code.

2. Open your theme.liquid file.

3. Place the JavaScript code just before the closing </body> tag to ensure it loads after the page content:

4. 

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const videos = document.querySelectorAll('.product-video');

    videos.forEach(video => {
      video.muted = true;
      video.play().catch(error => {
        console.error("Autoplay failed:", error);
      });
    });

    const productCardVideos = document.querySelectorAll('.product-card-video');

    productCardVideos.forEach(video => {
      video.setAttribute("autoplay", "");
      video.setAttribute("loop", "");
      video.setAttribute("muted", "");
      video.setAttribute("playsinline", "");

      video.muted = true;
      video.play().catch(error => {
        console.error("Autoplay failed on product cards:", error);
      });
    });
  });
</script>

Alternative: Add JavaScript in theme.js or custom JavaScript file:

-If you have a custom JavaScript file (e.g.,  theme.js), you can add the code there.

-This file might already be referenced in your  theme.liquid ,so just adding the code here will apply it across your site.

Let me know if this helps or if you need more guidance!

Thanks

[TanIQ]

It's still working on desktop (autoplay) but unfortunately not for mobile and not for the product card.

Anything I'm doing wrong here?

[rajweb]

Could you please send me an email so we can discuss this in more detail? Thank you!