How To AutoPlay a video on Shopify Website (Easy Fix)

[Litegreeneyes]

HI This isn't a question but is help for those looking for the easy step by step instructions and code to Auto Play videos on their Shopify website, it almost drove me crazy but i found this amazing link. It worked perfectly, easily and first time. Hope it helps!! 

https://youtu.be/0V6Rd01c-P8?si=IOkM1-PuTcphCkDz

#we'reallinthistogether

[DanielUK]

This is probably the single most helpful post on the entire forum, and the video is incredibly straight forward and clear.

[user100]

Saved my website. Thank you!

[LightStyl]

This is awesome and I'm definitely using already. Anyone have an idea of how to reduce the size on desktop though? It's a little too large.

[greengrl10]

Code for this solution was on pastebin but is no longer available.

[Mia04]

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

[PeterQ]

life saver omg! thank you sooo much

[chelsei]

thank 👏 you 👏 – wish more folks would post helpful things like this when they find them!

[atominte]

 challenge accepted! 

[IMYOURGIRL]

Hi there,

Amazing easy tutorial, thank you!

Would anyone know how to add 1 link to this video? So that if the customers clicks on the video, they will be redirected to our instagram account?

+ one more question:

Is is possible to choose anothe video for mobile screens? I'm trying to achieve a looping video on the website without anything else. When I make ik  (height: 100vh;) I need a different file for mobile to make sure the video is displayed correctly.

Thanks!

[atominte]

> Would anyone know how to add 1 link to this video? 

<style>
video {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
</style>

<a href="https://www.instagram.com/" target="_blank">
    <video muted autoplay playsinline loop>
        <source src="/media/cc0-videos/flower.mp4" type="video/mp4">
    </video>
</a>

> Is is possible to choose anothe video for mobile screens? 

Yes, but require to add JS code and additional css to the theme. I shared it here: https://community.shopify.com/c/shopify-design/hero-banner-video-getting-cropped/m-p/2978243/highlig...