Please advise. I am using Automatic video playback in the description on the product page. The video plays automatically, everything is fine, but when I select any product option the automatic video playback stops. How to fix this? Here is the code I am using:
video { width: 90%; height: auto; display: block; margin: 0 auto; }Topic summary
A user encountered an issue where autoplaying videos in product descriptions stopped playing when customers selected product options (variants). The video used standard HTML5 autoplay attributes but was interrupted by partial page reloads triggered by variant selection.
Technical Cause:
Selecting product options triggered AJAX requests that caused partial page reloads, interrupting the video’s loop and autoplay functionality.
Solution Implemented:
A helper created a custom Liquid section called “video-2” that:
- Wraps JavaScript code in proper
<script>tags to listen for variant selection changes - Automatically replays the video when options are selected
- Includes a customizable input field allowing videos to be added via URL
Outcome:
The solution was tested in a theme preview, then published to the live store. The user confirmed the fix worked as intended and expressed gratitude for the assistance. The helper offered continued support via email if needed.
Hi Demandphonecase, can you provide your store url so I can get a context on the problem, it seems that when the product option is selected an ajax request is send making a partial reload causing the loop option to reset.
1 Like
Please take a look. Thank you.
https://demandcase.com/products/customized-bare-18406
Yeah, when option is selected a partial reload is happening and the loop option is interrupted.
one way to solve this is to listen to all select elements and when a change occur we play the video, I do not have access to the theme code so I will try my best here :
document.addEventListener('DOMContentLoaded', function () {
let selectElements = document.querySelectorAll(".select__select");
//Make sure to add productVideo id to the video element.
let video = document.getElementById("productVideo");
selectElements.forEach(input => {
input.addEventListener('change', () => {
video.play();
});
});
});
Can you please tell me, do I have to paste this code into some file? Or replace a certain code in some file?
You need to paste it, and if you can send a screenshot of the code file so I can help you further if you facing any problems adding the code.
I meant the theme code files that is responsible for adding the video, the screenshot you provided need some changes:
document.addEventListener('DOMContentLoaded', function () { let selectElements = document.querySelectorAll(".select__select");
let video = document.getElementById("productVideo"); selectElements.forEach(input => { input.addEventListener('change', () => { video.play(); }); }); });
try to add this to custom liquid block , save and reload and see if the problem is solved.
Sorry, there was a typo mistake :
it is the same code but we wrap javascript code with a script tag.
Unfortunately, the video still does not play automatically after adding this code after selecting any of the product options. Just freezes((((
Can I send you an access request, that way it will be more Convenient, I will take care of adding the code and test it.
1 Like
Yes, of course. I’ll wait to add access. Thank you.
Hi Demandphoncase, preview your theme from here : https://demandphonecase.myshopify.com/?preview_theme_id=137608986846
Do you have any notes before pushing the changes to the live theme?,
what I did is instead of custom liquid I added a new section with the same styling and changed the javascript code, and you can add this section to any part of your theme.
I copied my theme before this.
What is the name of the section you added?
And I take it in the new section you added you can insert videos?
I created a new copy to work on the section,the name of the section is video-2,
I can add a setting that allow you to add videos.
Add it, please. Let’s see if it’s what it’s supposed to be.
okay, go to the latest copy of Dawn that was added and customized you will see the video-2 section have an input where you can enter any url of video and it will display.
Now should I try to publish the latest copy to fully test it? And keep that copy as the main copy, right?
Yeah, publish the latest copy to become the live theme.
1 Like