How can I make a Canva video autoplay on a product page?

[Eva35]

Hello,

I created a video in canva and uploaded it on my product page and I have tried everyway to let the video autoplay without having to press the play button but nothing sinces to work. Please I will be glad if someone can assist me on this.

This the url of the product page.

https://admin.shopify.com/store/40e44e/products/7985140367568

And also to disable the paly button.

This is the code:

<p><br></p>
<div style="position: relative; width: 100%; height: 0; padding-top: 100.0000%; padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden; border-radius: 8px; will-change: transform;"><iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0; margin: 0;" src="https://www.canva.com/design/DAF92tLcZus/3nOHYmrCoUwxnDL4v2nQ6Q/watch?embed" allowfullscreen="allowfullscreen" allow="fullscreen">
  </iframe></div>
<a type="video/mp4" href="https://www.canva.com/design/DAF92tLcZus/3nOHYmrCoUwxnDL4v2nQ6Q/watch?%0A&lt;style&gt;%0Avideo%20{%0Awidth:%20100%;%0Aheight:%20auto;%0Adisplay:%20block;%0Amargin:%200%20auto;%0A}%0A&lt;/style&gt;%0A&lt;video%20muted%20autoplay%20playsinline%20loop&gt;%0A%20%20%20%20&lt;source%20src=" rel="noopener">

[thirtycoders · Accepted solution]

Hi @Eva35,

Kindly insert the provided code, and you add video in the Shopify media section, copy the video link and paste it into the given URL in the code.

<style>
video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
</style>
<video muted autoplay playsinline loop>
    <source src="/media/cc0-videos/flower.mp4"
                  type="video/mp4">
    <source src="/media/cc0-videos/flower.mp4"
                  type="video/mp4">
</video>

 
Thanks

[Eva35]

Hello,

Thank you for your reply, I haved tried inserting the code but it does not still work. 

even when I tried inserting the video in the media, it shows error message

;

And please if you can help me show me the extact line I have to upload the code to, That will be nice because I keep on getting errors.

Thanks.

[abdullahshahid_]

You can add 'Hover Animation' if you designed your store on Canva. You can import your designs using Canvify app.