How to remove the 'play' symbol from an embedded video on a Refresh theme?

Solved

How to remove the 'play' symbol from an embedded video on a Refresh theme?

PookieHontus
Visitor
2 1 0

Hi There,

 

I am hoping to seek some expert coding on removing the 'play' symbol from the Shopify embedded video I have playing on my Homepage. I need it to autoplay on loop when traffic hits my site without them having to press play.
I am using the theme 'Refresh' I have tried to source this information myself with no luck.

 

Thanks in advance & hoping someone can help.

Accepted Solutions (2)

gmeo
Shopify Partner
13 2 2

This is an accepted solution.

Hi, 

According to your request, I understand you need to use the video as background, and it will automatically play for every customer who enters your store, and it will repeat endlessly.

Try this code, I hope it works for you:

Click to expand...
<video style="pointer-events:none;" loop="" muted="" no-controls="" autoplay="" src="URL VIDEO" playsinline="" draggable="false"></video>

in there:
style="pointer-events:none;" -> so that users cannot influence the video (cannot click or drag)
loop="" -> repeat
muted="" -> turn off the sound, currently most browsers do not allow videos to automatically play when the sound is turned on (must be turned off to automatically play)
no-controls="" -> hides the control bar
autoplay="" -> autoplay

Trong Nguyen Quoc

View solution in original post

PookieHontus
Visitor
2 1 0

This is an accepted solution.

Thank you so much Gmeo, I will give it a try. Quick question, is this in the theme.liquid?

View solution in original post

Replies 3 (3)

gmeo
Shopify Partner
13 2 2

This is an accepted solution.

Hi, 

According to your request, I understand you need to use the video as background, and it will automatically play for every customer who enters your store, and it will repeat endlessly.

Try this code, I hope it works for you:

Click to expand...
<video style="pointer-events:none;" loop="" muted="" no-controls="" autoplay="" src="URL VIDEO" playsinline="" draggable="false"></video>

in there:
style="pointer-events:none;" -> so that users cannot influence the video (cannot click or drag)
loop="" -> repeat
muted="" -> turn off the sound, currently most browsers do not allow videos to automatically play when the sound is turned on (must be turned off to automatically play)
no-controls="" -> hides the control bar
autoplay="" -> autoplay

Trong Nguyen Quoc
PookieHontus
Visitor
2 1 0

This is an accepted solution.

Thank you so much Gmeo, I will give it a try. Quick question, is this in the theme.liquid?

gmeo
Shopify Partner
13 2 2

You can place the code in the "Custom Liquid" section, and place it anywhere you want on your store

Screenshot 2024-02-06 103741.png

Screenshot 2024-02-06 103454.png

 

Trong Nguyen Quoc