Hi,
Is there a way to make the video on a product’s page to be played in a loop, rather than using clicking the play button?
What I am trying to achieve is that, as the user lands on the product make the video will keep on playing automatically in a loop
Please click the site URL for a much clear understanding:
URL: 4.26 Carat Blue Sapphire – Abbasi (abbasigems.com) (https://abbasigems.com/products/test)
PASSWORD: testingpage
Any help or support is much appreciated. Thank you
@justauser
Add
autoplay: true,
into your video tag for example
{{ media | video_tag: controls: true, autoplay: true, height: "600px"}}
Hi [email removed]Justauser,
This is Victor from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.liquid.
Step 3: Paste the below code at before element of the file → Save
{% if template contains ‘product’ %}
window.addEventListener(‘load’,()=>{
const runVideo=()=>{
const btn=$(‘.is-active span.deferred-media__poster-button.motion-reduce’)[0]
if(btn){
btn.click()
}
}
runVideo()
$(‘media-gallery .thumbnail-slider ul li’).each((i,item)=>{
$(item).on(‘click’,()=>{
const video=$(‘media-gallery .product__media-list li video’)[i]
if(video){
video.play()
}
})
})
});
{% endif %}
HI @PageFly-Victor I followed your instructions and did what you mentioned
but it is still the same, maybe the class names are in correct? any idea why?
The videos are still in the current state rather than automatically playing as the user lands
URL: https://abbasigems.com/products/test
Password:testingpage
sorry I miss. you can try new code
{% if template contains ‘product’ %}
{% endif %}
Hi @PageFly-Victor worked perfectly, but when the video plays there is a black border around the video, is it possible to remove that border and the controls in the video as well?
URL: https://abbasigems.com/products/test
Password:testingpage
you can use new code
{% if template contains ‘product’ %}
{% endif %}
Hi @PageFly-Victor , first off I want to thank you! so thank you so much for taking the time to reply! Much Appreciated!
The latest code you sent worked but not fully, it did get rid of the video player controls which is good but still the border is still there,
please refer to this link here, and you will see what I am referring to,
https://screenrec.com/share/96a45ewjIN
As you can see when the video is auto-played there is a border around the video and I would like to remove that border as well. is it possible?
Thank you again 
@PageFly-Victor for reference I attached a video as well hehe!
you can replace old code by new code
because the border shows very fast and hidden so I’m not sure where the border is we’ll try some code
.product__media-list li video::-webkit-media-controls{ display:none !important } .product__media-list li,.product__media-list li *{ border: none!important; box-shadow:none!important }@PageFly-Victor Yes Sir! so I replaced the old tag with your new one, and which is
<style>
.product__media-list li video::-webkit-media-controls{
display:none !important;
}
.product__media-list li,.product__media-list li *{
border: none!important;
box-shadow:none!important;
}
</style>
And still the borders are present!
new code
<style>
.product__media-list li video::-webkit-media-controls{
display:none !important
}
slider-component,slider-component *,.product__media-list li,.product__media-list li *{
border: none!important;
box-shadow:none!important
}
</style>
@PageFly-Victor no sir! still the same, as soon the page loads and the video plays, the border is present! hehe
one time
<style>
.product__media-list li video::-webkit-media-controls{
display:none !important
}
slider-component,slider-component *,.product__media-list li,.product__media-list li *{
border: none!important;
box-shadow:none!important;
outline:none!important
}
</style>
@PageFly-Victor You are a genius! it worked perfectly! and there is no border now!
Thank you so much!
Is there somewhere I can leave you a review? maybe google reviews?
you are welcome, I’m glad when can help you 
Thank you again! you saved me a lot of time!
You’re most welcome, @justauser ! 
Hi! I know this thread is is a bit old, however I was looking for a way to make my product video to autoplay, and I found this…
I have implemented your code, the controls are gone, there’s no border, loops fine too, however the stubborn product video just doesn’t autoplay 
This is what I have on theme.liquid
{% if template contains 'product' %}
{% endif %}
… what am I missing? can you please help?
Thank you!!
hey,
did you ever figure this out, im also having the same issue. inputted the code, but still not autoplaying