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.
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024