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

davidmira8
Tourist
10 0 2

 

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

 

 

 

 

 

 

 

Screenshot 2024-03-03 at 2.20.31 PM.png

Replies 6 (6)

PageFly-Noah
Shopify Partner
1156 205 231

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

davidmira8
Tourist
10 0 2

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

 

PageFly-Noah
Shopify Partner
1156 205 231

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.

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

PageFly-Noah
Shopify Partner
1156 205 231

 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>

 

 

 

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

davidmira8
Tourist
10 0 2

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
Shopify Partner
1156 205 231

 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>

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.