How can I set a video to autoplay in the Refresh theme?

[davidmira8]

Hello Shopify community, i am currently using the refresh theme and I was wondering if anyone knew how to edit the code for a video to play automatically without a play button. 

Below is a reference image of the video on my website. I would like the video to play automatically on autoplay instead of being a still video with a play button. Does anyone know how to do this? I would greatly appreciate your help. You can visit the website at monaieofficial.com

[PageFly-Noah]

This is Noah from PageFly - Shopify Page Builder App

To make the video autoplay, you can do the following:

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: Click on theme.liquid and paste the code above the </head>

<script>
window.onload = function () {
  setTimeout(function () {
    var video = document.querySelector('video');
    video.autoplay = true;
    video.loop = true;
    video.muted = true;
    video.play();
  }, 1000);
}
</script>

document.querySelector(‘video’) function is applicable to all videos on the website. If you need the app to apply to only one video, you need to set the Id to cover that video and reuse it this way: document.querySelector('#myId video');

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

[davidmira8]

It didn't work. Does the video have to be added through YouTube for it to autoplay?

[PageFly-Noah]

You can add via youtube or upload to shopify. It's not working right now, probably because the correct element hasn't been selected.  The code will apply autoplay for video . But currently it dont work, I will check it again.

Thank you so much.

[PageFly-Noah]

 Hi @davidmira8  I have rechecked the elements. You can try running again with this code. It will help you resolve the issue.

<script>
window.onload = function() {
    setTimeout(function() {
        var playButton = document.querySelector('.deferred-media__poster-button');
        if (playButton) {
            playButton.click();
        }
    }, 1000); 
};
</script>

[davidmira8]

I entered that new code above the </head> and it still didn't work. you can view the video that I am talking about on our home page if you scroll down.

[PageFly-Noah]

 Yes I can see, Sorry the solution above dont help you fix issue. You can try the value 1000 to 2000, so code will change to it:

<script>
window.onload = function() {
    setTimeout(function() {
        var playButton = document.querySelector('.deferred-media__poster-button');
        if (playButton) {
            playButton.click();
        }
    }, 2000); 
};
</script>