Automatically launch videos in the description on the product page

Technical Q&A

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.

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
4

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();
        });
    });
});