How to remove the play/pause button from autoplaying videos on website

Technical Q&A
,
1

Hi all,

I have seen websites that don’t have a play and pause button on their videos with auto play selected on desktop and mobile. How can I do the same for the videos on my homepage?

Website: pashmkash.com

2

Hey @officialsheikha

I checked your homepage video implementation and the autoplay setup is already correct.

The play/pause buttons are appearing because your <video> tag still contains:

controls=“controls”

You can remove it directly from the video element in your theme code.

Current version: <video playsinline autoplay loop muted controls="controls">

Change it to: <video playsinline autoplay loop muted>

If you prefer a quick CSS workaround first, you can also try hiding the controls with:

video::-webkit-media-controls {
display: none !important;
}

video::-webkit-media-controls-enclosure {
display: none !important;
}

One more thing:
your theme is using Shopify’s deferred-media component, which is designed for click-to-play videos and may inject its own play overlay.

So if removing controls="controls" does not fully remove the UI, you may also need to remove the deferred-media-poster-button from the section code.

Hope this points you in the right direction! If it solves the issue, feel free to Like the reply or mark it as the Solution so others can find it more easily too :folded_hands: .

3

Hey @officialsheikha try this one by follow these steps
go to the Shopify Admin page —> online store —> themes —> customization—> then click the home page video section —> in your right hand side you can see the controls of video section —> and then you can see the Show controls OR video controls toggles and then make these settings in OFF state and then save it that’s it
if this will work then don’t forget to like and mark as solution on it

4

Hey @officialsheikha

All you have to do is just simply find the code of your video section and remove controls="controls" from it and it will remove all the play/pause buttons from the video.

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

5

Thank you, it pointed me to the right direction. This is what I did and it worked.

Changed this:

{% liquid
if disable_controls
assign controls = false
assign enable_js_api = true
else
assign controls = true
assign enable_js_api = false
endif
%}

To this:

{% liquid
assign controls = false
assign enable_js_api = true
%}

And deleted this part:

<button
class=“button deferred-media__poster-button button-unstyled”

{% if video_preview_image != blank %}
<button class=“button deferred-media__poster-button button-unstyled” …>