All things Shopify and commerce
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
Solved! Go to the solution
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
Step 2: Add a custom liquid to the home page
Step 3: Add below code to the content of the new section
<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
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
Step 2: Add a custom liquid to the home page
Step 3: Add below code to the content of the new section
<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
That worked perfectly! Thank you very much for your help.
I really do appreciate it.
Have a great day,
Lucy
Glad that worked 🙂
Have a great day,
Makak
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😔
Hello, i have the same problem!
When i enter my website, i have to clic play to the video.
Mi web is https://www.olivita.com.uy/
how can i play it automatically? and full screen?
thank u very much
Olivita
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