Shopify themes, liquid, logos, and UX
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<style>%0Avideo%20{%0Awidth:%20100%;%0Aheight:%20auto;%0Adisplay:%20block;%0Amargin:%200%20auto;%0A}%0A</style>%0A<video%20muted%20autoplay%20playsinline%20loop>%0A%20%20%20%20<source%20src=" rel="noopener">
Solved! Go to the solution
This is an 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
This is an 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
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.
You can add 'Hover Animation' if you designed your store on Canva. You can import your designs using Canvify app.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025