Hi, We would like to remove the overlay where you can pause or skip the video. Can someone help me with this?
Topic summary
A user seeks to remove video playback controls (play/pause and skip buttons) from their Shopify store’s video overlay.
Initial Suggestions:
- One responder suggested removing the “controls” property from the video slider section, but the user confirmed this property doesn’t exist in their theme settings.
- Another responder offered to help via private message.
Working Solution Provided:
A JavaScript code snippet was shared to remove the controls attribute from all video tags:
document.addEventListener('DOMContentLoaded', () => {
const videos = document.querySelectorAll('video');
videos.forEach(video => video.removeAttribute('controls'));
});
Implementation Issue:
The user initially attempted to save the code incorrectly (likely as CSS). They were then instructed to:
- Navigate to Online Store → Edit Code
- Locate the theme.liquid file
- Insert the JavaScript within
<script>tags before the closing</body>tag - Save and refresh
Status: The discussion remains open; no confirmation yet that the solution was successfully implemented.
1 Like
you need to remove the controls property in the video slider section.
Hi, I dont have controls property in my section.
check p/m please.
If there are no settings within the theme for this, this JS should help. It removes the “controls” attribute for all video tags on the page.
document.addEventListener('DOMContentLoaded', () => {
const videos = document.querySelectorAll('video');
videos.forEach(video => video.removeAttribute('controls'));
});
@User026 , this isn’t CSS. You need to embed it differently.
-
Go to “Online Store”
-
Three dots → Edit Code
-
Find the theme.liquid file
-
Add the following code at the bottom of the file. Right before the closing tag
-
Save and refresh the target store page