How can I set up automatic video looping on my website?

Solved

How can I set up automatic video looping on my website?

Lucywooldridge
Visitor
2 0 1

Hi everyone! 

 

I have my own video inserted on my website homepage but you have to manually click play when you go on the website (www.lollilifting.com for reference). I would like the video to just play automatically on loop as soon as a customer clicks on my site. 

 

Any help would be greatly appreciated! 

 

Thanks

Accepted Solution (1)

theycallmemakka
Shopify Partner
1554 354 381

This is an accepted solution.

Hi @Lucywooldridge ,

 

You can achieve this by adding a custom liquid section on the site.

 

Please follow below steps to add the custom liquid section on the site.

 

Step 1: Go to theme > customize

makkaomakka_0-1699612525115.png

Step 2: Add a custom liquid to the home page

makkaomakka_1-1699612575969.png

Step 3: Add below code to the content of the new section

makkaomakka_2-1699612687849.png

 

<div class="video-section isolate page-width section-template--16796991848689__02765431-dbab-4e5a-925c-6cac2fee30aa-padding">
  <style>
video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
</style>
<video muted="" autoplay="" playsinline="" loop="" poster="//lollilifting.com/cdn/shop/files/preview_images/11b947e75d8343c1952dfd1cab4bdc60.thumbnail.0000000000_1100x.jpg?v=1693323352">
<source src="https://cdn.shopify.com/videos/c/vp/11b947e75d8343c1952dfd1cab4bdc60/11b947e75d8343c1952dfd1cab4bdc60.HD-1080p-7.2Mbps-17829097.mp4" type="video/mp4">
<source src="https://cdn.shopify.com/videos/c/o/v/8bda67156ced44e7a8a7f82d2abf0d18.mp4" type="video/mp4">
</video>
  </div>

 

Step 4: Save the changes.

 

 

Referance: https://mangit.myshopify.com/

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,

Makka

  

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 4 (4)

theycallmemakka
Shopify Partner
1554 354 381

This is an accepted solution.

Hi @Lucywooldridge ,

 

You can achieve this by adding a custom liquid section on the site.

 

Please follow below steps to add the custom liquid section on the site.

 

Step 1: Go to theme > customize

makkaomakka_0-1699612525115.png

Step 2: Add a custom liquid to the home page

makkaomakka_1-1699612575969.png

Step 3: Add below code to the content of the new section

makkaomakka_2-1699612687849.png

 

<div class="video-section isolate page-width section-template--16796991848689__02765431-dbab-4e5a-925c-6cac2fee30aa-padding">
  <style>
video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
</style>
<video muted="" autoplay="" playsinline="" loop="" poster="//lollilifting.com/cdn/shop/files/preview_images/11b947e75d8343c1952dfd1cab4bdc60.thumbnail.0000000000_1100x.jpg?v=1693323352">
<source src="https://cdn.shopify.com/videos/c/vp/11b947e75d8343c1952dfd1cab4bdc60/11b947e75d8343c1952dfd1cab4bdc60.HD-1080p-7.2Mbps-17829097.mp4" type="video/mp4">
<source src="https://cdn.shopify.com/videos/c/o/v/8bda67156ced44e7a8a7f82d2abf0d18.mp4" type="video/mp4">
</video>
  </div>

 

Step 4: Save the changes.

 

 

Referance: https://mangit.myshopify.com/

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,

Makka

  

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

Lucywooldridge
Visitor
2 0 1

Hi @theycallmemakka 

 

That worked perfectly! Thank you very much for your help. 

I really do appreciate it.

 

Have a great day,

 

Lucy 

 

theycallmemakka
Shopify Partner
1554 354 381

Glad that worked 🙂

 

Have a great day,

Makak

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

missiesha2020
Visitor
1 0 0

Hey may I have some help with this. I did try this method and it works fine on my PC but when you preview site on iPad or mobile device it still shows play button. Help  please😔