How to remove the "play" button on video so video automatically starts and runs on loop

Shopify Discussion

Topic summary

A Shopify store owner using the free Spotlight theme wants to remove the video play button from their homepage and enable autoplay with looping.

Two solutions were provided:

  1. CSS Method (Made4uo-Ribe): Add CSS code to hide the play button by targeting .section-video span.deferred-media__poster-button.motion-reduce with display: none in the theme’s CSS file (base.css, style.css, or theme.css).

  2. JavaScript Method (BSS-Commerce): Edit the global.js file and add JavaScript code that automatically triggers a click on the play button when the homepage loads.

Important note: Both solutions mention that while the play button can be removed, the video may not autoplay automatically due to browser autoplay policies. The video will loop as configured in the theme editor settings.

A follow-up question asks how to enable autoplay without requiring user interaction, which remains a challenge due to browser restrictions on autoplaying videos.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I am using the FREE theme Spotlight. I am trying to remove the play button on the video of my homescreen so it automatically plays on a loop.

Any assistance with where to look would be helpful.

Here is my website. https://orderlunchies.com/

TYIA for any help

1 Like
2

Hi @orderlunchies

You can remove the button by following the instructions below

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.video-section span.deferred-media__poster-button.motion-reduce {
    display: none;
}

And Save.

Result:

Made4uoRibe_0-1700107895427.png
Made4uoRibe_0-1700107895427.png1897Ă—906 75.3 KB

NOTE: The video will not automatically play but does play loop as you set in the Theme editor. To edit this, you need to hire someone to edit the code for you.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

Hi @orderlunchies ,

  1. Go to Themes => Edit Code
![view - 2023-11-17T094812.556.png|1367x713](upload://c0lLJryjypklnYo6P9gMwI0bzo3.png)
  1. Select file global.js

BSSCommerce_0-1700189597554.png
BSSCommerce_0-1700189597554.png1740Ă—882 60.6 KB

  1. Add the following code to the end of file:
if (window.location.pathname === '/') {
    window.onload = function () {
    document.querySelector('#Deferred-Poster-Modal-29132708020404').click()
    }
}

BSSCommerce_1-1700189696987.png
BSSCommerce_1-1700189696987.png1636Ă—901 45.5 KB

Hope it helps @orderlunchies

4

Hey I removed the play button but I want the video on my homepage to autoplay without clicking the screen? what to do?