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

Store Design
,
1

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:

<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>
2

Hello @biznazz101

You can try adding the below code:

I hope the above is useful to you.
Best regards,
GemPages Support Team

3

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

<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

4

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

5

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

6

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.

1 Like
7

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

8

where in the edit code do you input this?

9

Hey! Where do you paste this code please?

10

Sir where I will paste this code

11

I am also wondering the same thing

12

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

13

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

14