Background video restarting on mobile

Hi Balbooa Team,

I'm experiencing an issue with a background video inside a Gridbox section. The video works correctly on desktop, but on mobile it restarts every time the user scrolls. This happens even when I remove the loop attribute via JavaScript.

Here is the exact code I'm using:

(function() {

const disableLoop = (video) => {
if (!video) return;
video.loop = false;
video.removeAttribute('loop');
};

const scanVideos = () => {
const videos = document.querySelectorAll('.ba-video-background video');
videos.forEach(disableLoop);
};

scanVideos();

const observer = new MutationObserver(() => {
scanVideos();
});

observer.observe(document.documentElement, {
childList: true,
subtree: true
});

let retries = 0;
const interval = setInterval(() => {
scanVideos();
retries++;
if (retries > 30) {
clearInterval(interval);
}
}, 300);
})();

The script successfully removes the loop attribute and prevents looping on desktop. However, on mobile Gridbox appears to recreate or reinitialize the background video element during scroll events. When this happens, the video restarts from the beginning, even though the loop attribute has been removed.

My questions are:

Is there a way to prevent Gridbox from recreating or reinitializing background videos on mobile so that the video does not restart when scrolling?

Could you consider adding an option in Gridbox to enable or disable video looping directly in the interface? This would be extremely helpful and would avoid the need for custom scripts.

Any guidance or an official workaround would be greatly appreciated.

Thank you, Gianni