How can I autoplay video on product page Spotlight theme

[Afterhrsuk]

Hi Guys

if you look at this product on my website, i have a video within the product images, i am keen to have this autoplay and loop instead of a customer having to click on it

https://www.afterhrsuk.com/products/rwd-zip-up-hoodie-tracksuit-set

can anyone offer suggestions, assume i will need a code?, if so please let me know what i need to do

as always thanks for the help

[Bundler-Manuel]

Hi there @Afterhrsuk  here’s a very easy to understand video with step by step instructions that I think should help you out a lot here https://m.youtube.com/watch?v=0V6Rd01c-P8 

Hopefully this sorts it out!

[Afterhrsuk]

thanks, the code they talk about is unfortunately no longer available 

[Weblegs_Support]

To autoplay your video on this theme, You need to add a small script,

Here are few steps to follow
  1. Go to Online Store -> Theme -> Edit code.
    2. Open your product-thumbnail.liquid/theme.liquid file and add the below script on this file

    <script>
        document.addEventListener('DOMContentLoaded', function () {
         document.querySelector(".plyr__control").click();
      });
    </script>

After adding this script, here are the next steps to follow
1. Go to Online Store -> Theme ->Customize
Enable video looping

Let us know, if the above solutions works for you.

[Afterhrsuk]

thanks for your help

when searching for product-thumbnail.liquid/theme.liquid in my code, i can not locate it anywhere.. any further help you can provide?

[Weblegs_Support]

We have this file on Spotlight theme our side, but if you are not getting this file in your theme, then you can simply add this script on any of the Product page liquid file. It will work.

[Afterhrsuk]

thanks 

the looping works, but not the autoplay, you still need to press on the video to make it play

[Weblegs_Support]

If you can share your store theme files with us, we can check this for you.