How to autoplay product videos on the Symmetry theme?

[signofastruggle]

Hello! I am having trouble making a product video autoplay when the page loads. I would like the video to be deferred, and be auto playing by the time the customer makes it to the bottom of the product page on both desktop and mobile.

It is within the symmetry theme. Please see example product below.

https://bellarosa.jewelry/products/1-47ct-old-mine-cut-diamond-and-pink-sapphire-ring

Thank you so much!

[miguel-angel]

Hi @signofastruggle !

You will have to add a few HTML Video Attributes to the video in order to allow it to autoplay and comply with some of the different browser rules that allow autoplaying.

in your theme code, locate product section and within the <video> html tag include the following attributes, as such:

<video autoplay muted playsinline preload="metadata">

Let me know if you need further help with this,
Cheers!

[signofastruggle]

Hello, I have tried to add that code to both the product and video sections. I have also tried to enable autoplay from the video.liquid section, see screenshot. 

Can you please further advise?

Thank you so much

[miguel-angel]

Hey!

Let's try the following:

1. search for the "media.liquid" file within the Snippets folder
2. locate the following lines:

3. add the following to the media_tag filter

Let me know if that works,
cheers!

[signofastruggle]

Hello! I added that and it still does not autoplay:

[signofastruggle]

To confirm: I also added the space after :

autoplay: true, 

[miguel-angel · Accepted solution]

Hey !

I just realized what the issue was but requires a bit of careful coding, to target the correct videos, so you don't break other videos in your website.

Basically, the video in the PDP is being covered by a thumbnail image that goes away when you click it. But the video is already auto playing thanks to the modifications we did before.

You can verify this by entering your product page, waiting like 5-10 seconds and then clicking in the thumbnail, the video will have already elapsed 5-10s which means it was already autoplaying behind that thumbnail.

Basically, you have to add a display:none to that thumbnail.
But I would be careful, and target only the thumbnails in the PDPs that you actually want your change on, otherwise, it can affect all of the videos in your site.