What's your biggest current challenge? Have your say in Community Polls along the right column.

Why isn't my custom video autoplaying on mobile?

Why isn't my custom video autoplaying on mobile?

GYMSUPPLYCO
Visitor
3 0 0

HI  guys, I am using a custom liquid on my home page that should auto play on desktop and mobile and it wont play on mobile. I have converted to mov file. Also it would be great if there was a fucntion for it to be automuted but then you can opt to play the sound as well. 

much regards any help very appreicated !

 

<video playsinline="" """" autoplay="autoplay" preload="" id="vid" width="100%">
<source src="">

 

@PageFly-Victor @PageFly-Kate @GemPages 

Replies 3 (3)

PageFly-Kate
Shopify Partner
1319 368 402

Hi @GYMSUPPLYCO ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:

There are a few things you can try to troubleshoot why your custom liquid video is not playing on mobile:

  1. Check the format of your video: While you mentioned that you have converted your video to a .mov file, it is possible that the mobile browser is not compatible with this format. Try converting your video to a more widely supported format, such as MP4.

  2. Add the "muted" attribute to your video tag: To have your video autoplay but remain muted by default, add the "muted" attribute to your video tag. You can then add a button or toggle switch for users to turn the sound on if they wish.

  3. Ensure your mobile browser supports autoplay: Some mobile browsers do not support autoplaying of videos due to data and battery concerns. You can test this by trying to play the video on a different mobile browser or device.

Here's an updated video tag with the "muted" attribute added:

<video autoplay muted playsinline controls preload="auto" width="100%">
<source src="your-video-file-path.mov" type="video/quicktime">
</video> 

Hope my answer will help you

Please let me know if it works by giving it a Like or marking it as a solution!


Unlock the secrets to a record-breaking BFCM with PageFly and Canva


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)


➜ Weekly updated Shopify tutorials on YouTube


All features are available from the Free plan. Live Chat Support is available 24/7.


GemPages
Shopify Partner
5625 1262 1254

Hi @GYMSUPPLYCO,

 

Glad to support you today.

 

 To can autoplay on mobile, you should use this code on liquid code:

<video poster="" loop="" muted="" playsinline="" controls="" autoplay="" src="XXXX" width="100%"></video>

 

*Note: With the mobile turn on battery saver, the video won't run automatically.

 

I hope you find the answer helpful.

Kind & Best regards,
GemPages Support Team.

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

Typostore
Shopify Partner
118 11 13

Hello @GYMSUPPLYCO , if you use code this, it only work on desktop and if you want it work on mobile you need write more function jquery for it

and it will take sometime for code this.

- I'm dev shopify. | Skype : hoang.nguyenit92 | Email: typostores@gmail.com
- Is my reply helpful? Click Like to let me know!
- If you got your answer? Mark it as an Accepted Solution