All things Shopify and commerce
Hello Shopify community, i am currently using the refresh theme and I was wondering if anyone knew how to edit the code for a video to play automatically without a play button.
Below is a reference image of the video on my website. I would like the video to play automatically on autoplay instead of being a still video with a play button. Does anyone know how to do this? I would greatly appreciate your help. You can visit the website at monaieofficial.com
This is Noah from PageFly - Shopify Page Builder App
To make the video autoplay, you can do the following:
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: Click on theme.liquid and paste the code above the </head>
<script>
window.onload = function () {
setTimeout(function () {
var video = document.querySelector('video');
video.autoplay = true;
video.loop = true;
video.muted = true;
video.play();
}, 1000);
}
</script>
document.querySelector(‘video’) function is applicable to all videos on the website. If you need the app to apply to only one video, you need to set the Id to cover that video and reuse it this way: document.querySelector('#myId video');
Hope my solution will help you resolve the issue.
Best regards,
Noah | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
It didn't work. Does the video have to be added through YouTube for it to autoplay?
You can add via youtube or upload to shopify. It's not working right now, probably because the correct element hasn't been selected. The code will apply autoplay for video . But currently it dont work, I will check it again.
Thank you so much.
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
Hi @davidmira8 I have rechecked the elements. You can try running again with this code. It will help you resolve the issue.
<script>
window.onload = function() {
setTimeout(function() {
var playButton = document.querySelector('.deferred-media__poster-button');
if (playButton) {
playButton.click();
}
}, 1000);
};
</script>
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
I entered that new code above the </head> and it still didn't work. you can view the video that I am talking about on our home page if you scroll down.
Yes I can see, Sorry the solution above dont help you fix issue. You can try the value 1000 to 2000, so code will change to it:
<script>
window.onload = function() {
setTimeout(function() {
var playButton = document.querySelector('.deferred-media__poster-button');
if (playButton) {
playButton.click();
}
}, 2000);
};
</script>
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024