Making Videos Auto Play and Hide Video Controls

Store Design
, ,

Topic summary

A user seeks to make product videos autoplay and hide controls on their Shopify store using the Showcase theme. They’re working on a product page feature section with video blocks.

Initial Solutions Proposed:

  • Adding JavaScript code before the </body> tag in theme.liquid
  • Adding autoplay attribute directly to video tags in the editor

Issue: The first solution didn’t produce any changes when implemented.

Refined Solution:
A contributor provided updated HTML markup for the video element including:

  • autoplay attribute for automatic playback
  • muted attribute (required for autoplay in most browsers)
  • loop attribute for continuous playback
  • Removal/absence of controls attribute to hide video controls

Implementation Steps:

  • Locate the video tag in product-template.liquid or relevant template file
  • Add the specified attributes to the video element
  • Clear browser cache and test

Status: The discussion remains open with alternative JavaScript solutions suggested if the HTML approach doesn’t work. The user may need developer assistance if issues persist.

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

Hi,

I am wanting to make my product video autoplay and also hide/disable the video controls. I am using the Showcase theme. Please see link to page I am referring to.

https://miamily.com.au/collections/carry-on/products/miamily-carry-on-forest-green

I am also creating a feature section on this product page (in progress) and I am adding video blocks which I will also need to hide the video controls. (these already autoplay)

1 Like
2

Hello @kyecoolkidz ,

Edit theme.liquid search for

Just before to it add this code

Regards
Guleria

3

Hi, thanks for your reply.

However that code didn’t seem to change anything…

Any other solutions?

4

I don’t find the code I provided in the source code ?

Another solution find the video tag in the editor and pas tis attribute autoplay
like this:
https://www.w3schools.com/tags/att_video_autoplay.asp

1 Like
5

Hi,

Please check source code again. I removed it because there was no change, but have added it again.

Please let me know if I have missed anything.

6

Hey @kyecoolkidz ,

To make your video autoplay and hide the controls using the provided code, you can update it as follows:

Changes Made:

  1. autoplay Attribute
  • Added autoplay to make the video start automatically.
  1. muted Attribute:
  • Added muted to ensure the video plays without sound (this is required for autoplay in most browsers).
  1. Removed controls Attribute:

-Since there is no controls attribute in your original code, no need to explicitly remove it. The absence of this attribute ensures the controls are hidden. 4. loop Attribute:

-Ensures the video repeats continuously.

After updating the code:

  • Save the changes in your theme file.

  • Open your browser, clear the cache, and test the product page to ensure the video autoplay works without controls.

  • Confirm that the video loops continuously and starts muted.

If any issues persist, let me know!

If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

1 Like
7

Replace it with this one

If still doesn’t work then you need to find the code and add the attribute.
or ask a developer to do it.

8

@kyecoolkidz ,

Go to Online Store > Themes > Actions > Edit Code.

Find the product-template.liquid (or the relevant template that contains your video) file under Sections or Templates.

Add the script just before the tag in the file. It could look like this:

Thanks