Embedded video not playing when clicking on product images

[Andrerigo99]

Hi there, I have embedded a video on the product page using a custom liquid section. It plays fine but when I click on a product image (either to zoom it or I click the next image in the slider), the video stops playing. This happens both on mobile and desktop.

I'm using Dawn theme and this is the custom liquid code: 

<style>
video {
display: block;
margin: 0 auto;
width: 100%;
}
</style>

<video autoplay playisinline muted loop preload="metadata">
<source src="https://cdn.shopify.com/videos/c/o/v/784fa0eb8e75454f823f1f9328989901.mp4" type="video/mp4">
</video>

store url: https://vsharpening.myshopify.com/products/v-sharpening-tool

Can someone please help me resolve this?

Thank you for any assistance!
Andrea

[DeepVyas]

Check this solution for Dawn Theme 
https://community.shopify.com/c/shopify-design/how-to-make-the-video-play-in-a-loop-in-the-products-...

[Andrerigo99]

Thanks for getting back to me. I've read this discussion but it's about a different issue (adding a video in the product images).

My video is below the product images.

[Jonathan_Jelkin]

Did you ever find a solution to this, i'm having the same problem. 

[Jonathan_Jelkin]

Isn't it obvious...

[ricomester]

Hey

I know this is a late reply, but my client had the same problem, that after opening the image in full size, the autoplay stopped, so I looked for which function stops this. In the template we use, there is a file called global.js, probably in yours too, you need to find the line where it says: "pauseAllMedia()". Here is the function that pauses all videos, so depending on where you load the video from (youtube, vimeo, local) you need to delete the given lines. In my case, it loaded them from the server, so I had to delete the following three lines and now the playback does not stop when opening the gallery:
document.querySelectorAll('video').forEach((video) => {
if (!video.closest('[data-video-hero]')) video.pause();
});

[mr_sl1p]

Thank you my friend!