Solved

Why won't my video autoplay on Shopify CDN using a custom liquid section?

biznazz101
Shopify Partner
494 48 88

I have been trying to get  a video I uploaded to shopify CDN to autoplay using a custom liquid section, it does show the video and it plays fine just not automatically. I have looked online and tried everything I can think of. I am probably doing something wrong if anyone can help I would appreciate it. Thanks!

Code I've tried:

 

 

 

<center><iframe width="100%" height="500px" src="https://cdn.shopify.com/videos/c/o/v/5e846ce735404870ba011b93853c31dd.mp4" title="Biznazz Healthcare Stop Motion" frameborder="0" allow="accelerometer; autoplay:true; loop:loop; muted:true; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; allowfullscreen"></iframe>

 

 

 

Don't hesitate to reach out for more help with your store.
SEE OUR TASK STORE or check us out via our profile! FREE STORE AUDIT
Accepted Solutions (2)

GemPages
Shopify Partner
5588 1261 1208

This is an accepted solution.

Hello @biznazz101 

 

You can try adding the below code:

<video controls="" loop="" muted="" playsinline="" autoplay="" src="https://cdn.shopify.com/s/files/1/0349/7472/8236/files/vitakey-gif_3.mp4?v=1591688508" width="100%" height="100%"></video>

I hope the above is useful to you.
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

View solution in original post

PageFly-Victor
Shopify Partner
7865 1785 3058

This is an accepted solution.

Hi @biznazz101 

 

This is Victor from PageFly - Shopify Page Builder App

 

In order to have the video autoplay, you will need to have it muted attribute and should have the autoplay attribute too.

It should be like this 

<center><iframe width="100%" height="500px" src="https://cdn.shopify.com/videos/c/o/v/5e846ce735404870ba011b93853c31dd.mp4" title="Biznazz Healthcare Stop Motion" frameborder="0" controls="" loop="" muted="" playsinline="" autoplay="" "></iframe>

 

Hope this can help you solve the issue 

 

Best regards,

Victor | PageFly

View solution in original post

Replies 13 (13)

GemPages
Shopify Partner
5588 1261 1208

This is an accepted solution.

Hello @biznazz101 

 

You can try adding the below code:

<video controls="" loop="" muted="" playsinline="" autoplay="" src="https://cdn.shopify.com/s/files/1/0349/7472/8236/files/vitakey-gif_3.mp4?v=1591688508" width="100%" height="100%"></video>

I hope the above is useful to you.
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
Shredventure
Tourist
6 0 1

Hi, this code worked for my site but I have two questions:
- is there a way to get rid of the video controls?

- can I make the video block a clickable with a link?

thanks in advance

PageFly-Victor
Shopify Partner
7865 1785 3058

Hi @Shredventure 

Thanks for your confirmation, 

About your concerns:

- is there a way to get rid of the video controls?
> In this case you will need to use another code to display video only, not the iframe like currently

- can I make the video block a clickable with a link?

> I have tried it but it is not possible because once you click to the video block, the video is flow their container make you cannot click to the link

 

 

FavourEdum
Visitor
1 0 1

Hiii, I am trying to achieve the same result. 

please where do I insert this code? Is it in the video section - CUSTOM CSS area?

 

looking forward to your revert.

RD3DPrinting
Visitor
2 0 0

Is there a way to center the video on the screen?

Panda2231
Visitor
1 0 0

where in the edit code do you input this?

kashtoos
Visitor
1 0 0

Sir where I will paste this code 

PageFly-Victor
Shopify Partner
7865 1785 3058

This is an accepted solution.

Hi @biznazz101 

 

This is Victor from PageFly - Shopify Page Builder App

 

In order to have the video autoplay, you will need to have it muted attribute and should have the autoplay attribute too.

It should be like this 

<center><iframe width="100%" height="500px" src="https://cdn.shopify.com/videos/c/o/v/5e846ce735404870ba011b93853c31dd.mp4" title="Biznazz Healthcare Stop Motion" frameborder="0" controls="" loop="" muted="" playsinline="" autoplay="" "></iframe>

 

Hope this can help you solve the issue 

 

Best regards,

Victor | PageFly

Stephhrev
Excursionist
33 0 7

Hey! Where do you paste this code please?

JV_23
Tourist
6 0 1

I am also wondering the same thing

biznazz101
Shopify Partner
494 48 88

You can use a "Custom Liquid" section for the code above!
@biznazz101

Don't hesitate to reach out for more help with your store.
SEE OUR TASK STORE or check us out via our profile! FREE STORE AUDIT

topnewyork
Trailblazer
253 26 35

Hi @biznazz101,

You can access the video here: Solution Video. I'm confident it will prove invaluable in resolving your autoplay issue seamlessly. If you have any further questions or need clarification on any aspect, feel free to reach out.

Thank you

Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel
topnewyork
Trailblazer
253 26 35

Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel