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

Store Design
, , ,
1

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

11 Likes
2

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

2 Likes
3

Saved my website. Thank you!

4

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.

5

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

6
video { width: 100%; height: auto; display: block; margin: 0 auto; }
2 Likes
7

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

8

life saver omg! thank you sooo much

9

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!

1 Like
10

challenge accepted!

11

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


[
    
](https://www.instagram.com/)

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/highlight/true#M780037

12

Hi there, autoplay on the desktop version works, but customers are still required to physically play the video on mobile. How can I fix the code?

13

This has worked perfect for Shopify files, but cant seem to get to work with YouTube hosted videos, any suggestions?

1 Like
14

Hi how to autoplay on homepage

15

This was very helpful.
Now is there any way to overlay a CTA button on top of the video?!

16

Here is some code you can add to a custom liquid to make an auto play YouTube video:

<iframe style="display: block; margin: auto; aspect-ratio: 16 / 9; height: 100%; id=" custom-youtube-video-page"="" class="embed-responsive-item js-youtube lazyloaded" width="90%" height="360px" allowfullscreen="" frameborder="0" modestbranding="0" controls="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" title="" src="https://www.youtube.com/embed/B_LqXj5pUAc?enablejsapi=1&mute=1&autoplay=1"></iframe>

Just make sure to change to URL from my video to yours. You can change the height of the video by replacing height=“360px”.