Solved

Product page video autoplay.

DEksperti
Tourist
5 0 0

Hello,

 

I would like to make the video that is displayed on my product page play automatically when the page is opened.

 

Could someone help me set that up?

 

230986fccd8f2b24a73ef50d36104f92.png

The url is - https://98cb73-4.myshopify.com/products/test

Password - skeodo

Accepted Solution (1)
BSS-Commerce
Shopify Expert
3401 450 503

This is an accepted solution.

Sorry I didn't send you the code before. There are currently spelling errors in your code. I would like to send you a new code. Please follow the steps I instructed before and replace it with this code:


<script>
document.addEventListener("DOMContentLoaded", function() {
if (window.location.href.includes("/products")) {
var posterButton = document.querySelector('.deferred-media__poster-button.motion-reduce');
if (posterButton) {
posterButton.click();
}
}
});
</script>

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 6 (6)

BSS-Commerce
Shopify Expert
3401 450 503

Hello, I have read your problem, and here is the solution, please follow these steps:
Step 1: Open edit code in online store:

view - 2024-01-11T151316.769.png

Step 2: Find and open the theme.liquid file

view - 2024-01-11T151418.801.png

Step 3: Scroll to the bottom of the file and add this code before the closing </body> tag

view - 2024-01-11T151502.481.png

Step 4: Save changes and test your off-page activity

 

Hope it helps @DEksperti 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

DEksperti
Tourist
5 0 0

Hello!

 

Thank you for the reply.

 

I pasted the code into the theme.liquid but the video still isn't autoplaying. Have I done it right?

 

9ab49bcb2e5d48b96aaab1d5da8878cc.png

BSS-Commerce
Shopify Expert
3401 450 503

This is an accepted solution.

Sorry I didn't send you the code before. There are currently spelling errors in your code. I would like to send you a new code. Please follow the steps I instructed before and replace it with this code:


<script>
document.addEventListener("DOMContentLoaded", function() {
if (window.location.href.includes("/products")) {
var posterButton = document.querySelector('.deferred-media__poster-button.motion-reduce');
if (posterButton) {
posterButton.click();
}
}
});
</script>

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

DEksperti
Tourist
5 0 0

Is there any way I can make the dashboard of the video (stop/play button etc.) not show?

BSS-Commerce
Shopify Expert
3401 450 503

You can add this code after the code you added:


<script>

var videoElement = document.querySelector('video');
if (videoElement) {
videoElement.controls = false;
}

</script>

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Safa2001
Visitor
2 0 0

It worked for me but it only works on desktop. Is it possible to let it also work on mobile?