Hello I am currently having trouble with Video Image.
When customers are scrolling right to see more of the photos my videos aren’t automatically playing , they play when they press them from tab under that.
Site:getprivateview.com
You can check on mobile how the videos are playing only when you press them from thumbnail below. How could I fix that
It only happens on mobile, from what I’ve seen correct?
Maybe implementing something like the solution from here could work: https://stackoverflow.com/questions/15395920/play-html5-video-when-scrolled-to
Another option would be to disable the drag/scroll and force the user to tap the thumbnails…
This happens because your theme only triggers video playback when a thumbnail is clicked. So you’ll need to enable autoplay in your theme settings or update the product gallary code to play the video on active slide change.
Hi,
I checked on mobile and it looks like the videos only play when their thumbnail is selected. This is often how the theme’s product gallery is configured by default.
Which Shopify theme are you using? That will help determine whether it’s a setting that can be changed or if the gallery code needs a small customization.
Check this solution, it should do what you want – How to Autoplay product videos - #20 by tim_tairli
Hi @Kiwart ,
The issue: mobile browsers block video autoplay unless the video is muted + playsinline (that’s why it only plays when tapped). Also, most themes only play the active slide, not on swipe.
Step 1: In your product template → media block, turn on “Autoplay video.” Make sure the video is muted.
Step 2: To play videos as customers swipe to them, add this before </body> in theme.liquid (back up first):
<script>
document.addEventListener('DOMContentLoaded', () => {
const videos = document.querySelectorAll('.product__media video, media-gallery video');
if (!videos.length) return;
videos.forEach(v => { v.muted = true; v.setAttribute('playsinline',''); v.loop = true; });
const io = new IntersectionObserver(entries => {
entries.forEach(e => e.isIntersecting && e.intersectionRatio >= 0.6
? e.target.play().catch(()=>{})
: e.target.pause());
}, { threshold: [0, 0.6, 1] });
videos.forEach(v => io.observe(v));
});
</script>
It plays each video once it’s ~60% in view and pauses it when swiped away. The muted/playsinline lines are what let it autoplay on phones.
The only problem with this code is that Dawn family themes do not output any <video> tags until “Play” button is clicked and use the <deferred-media> custom elements.
Therefore videos array in the code above would be empty and the code will do nothing.
Hello I am using Dawn theme. Can you give me step by step instructions? I am not developer and find it hard to do it myself
