Making Videos Auto Play and Hide Video Controls

Store Design
, ,
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