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

Shopify Discussion
,

Topic summary

Goal: Enable a homepage video in the Refresh theme to autoplay without showing a play button.

What was tried:

  • Advised to edit theme.liquid (Online Store > Themes > More actions > Edit code) and paste custom JavaScript above .
  • Script targets the video element via document.querySelector(‘video’), with guidance to scope to a specific video using an element ID (e.g., document.querySelector(‘#myId video’)).
  • Clarified the video can be from YouTube or uploaded to Shopify; source shouldn’t block autoplay by itself.

Current issues:

  • Initial script didn’t work; likely due to not selecting the correct video element on the page.
  • A revised code snippet was provided, but still no effect when added above .
  • Further suggestion was to adjust a numeric value (from 1000 to 2000), implying a timing/delay change in the script, but results remain unchanged.

Notes:

  • A reference screenshot was shared; code snippets are central to the solution (exact code content not confirmed in the thread).

Status: Unresolved. Next step hinges on correctly targeting the specific video element and testing timing adjustments; no confirmed fix yet.

Summarized with AI on January 3. AI used: gpt-5.
1

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
Screenshot 2024-03-03 at 2.20.31 PM.png1886×1276 309 KB

2

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

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

3

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

4

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.

5

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

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

7

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: