Hi everyone,
i am using xclusive shopify theme and the product card video is not auto playing. Can anyone help.
thanks
Hey @shahsuhaib
First, a quick tip: most browsers now block videos from auto-playing if they have sound. If your product card video has audio, try setting it to “muted” by default. In your theme’s code (or custom HTML block), make sure the video tag includes muted, autoplay, and playsinline like this:
xml
<video autoplay muted playsinline>
<!-- your sources here -->
</video>
If you’re using the built-in video block from Shopify and can’t access the code, doublecheck the theme settings for your product cards—sometimes there’s an option to toggle auto-play, but it might need the update above.
Just remember, even with these tweaks, some browsers (especially on mobile) may still block autoplay, so adding a visible play button is always good for user experience.
Hope this helps! If you share more details (screenshots or the code section), happy to take a closer look.
thank you,
i had searched the internet and tried to check the code. it seems to be fine
Hello, @shahsuhaib
You’ll need to add some custom code to make the video autoplay on every product page.
To do this, follow these steps:
-
In your code editor, open the Layout folder on the left side.
-
Click on the theme.liquid file.
-
Scroll all the way down to the bottom of the file, just before the closing tag.
-
Paste the following JavaScript code right above the tag:
<script>
document.addEventListener('DOMContentLoaded', function() {
const productVideos = document.querySelectorAll('.product-card video, .product-single__media video');
productVideos.forEach(function(video) {
video.setAttribute('autoplay', '');
video.setAttribute('muted', '');
video.setAttribute('loop', '');
video.setAttribute('playsinline', '');
var playPromise = video.play();
if (playPromise !== undefined) {
playPromise.then(_ => {
}).catch(error => {
});
}
});
});
</script>
Try this code please.
Thank You!
i have accepted your request
I am trying to send you DM