Issue dynamically loading video background

[someguy3000]

I’m having trouble with
I am trying to dynamically load a video background with code. This works in the site preview but in the live site, it shows one video before interrupting it with another. The element does not have a video background in the WYSIWYG editor. I don’t understand why or how this is happening.
My basic code is as follows:

$w.onReady(() => {
    console.log('Changing section background');

    let section = $w('#mySection');
    let background = section.background;

    // randomly choose video URL
    const videoUrl = getVideoUrl();
    if (!background.src || background.src.length == 0) {
        background.src = videoUrl;
    }
});

Again, this works as expected in site preview. In the live site, it appears one video is loaded than interrupted by the code. Based on when the console message appears, it seems the video is loaded before the code is executed. But the element should not have a video background before my code is executed.

Working in
Wix Studio Dev mode

What I’ve tried so far
Clearing cache and cookies, disabling browser addons

[someguy3000]

Forgot to mention I also tried disabling caching for the page and that didn’t work either, to my surprise.

[noahlovell]

Have you got a link to the site?

There’s no dataset or anything connected to the section background - it’s all managed via code?

[someguy3000]

Home | RailRoad Earth Atl

And no there’s no database or anything, just static links

[someguy3000]

Bumping, does anyone have an idea about this?

[onemoretime]

Hi, @someguy3000 !!

Could you let us know what kind of URL getVideoUrl() returns? Is it a Wix media URL or an external direct link URL?

[noahlovell]

I’m suspecting this might be related to server side rendering

Have you wrapped the code to ensure it only runs on the browser, rather than server side too:

import { rendering } from "@wix/site-window";

$w.onReady(async function () {
    if ((await rendering.env()) === "browser") {
		// Your code here
    }
});