Dynamic text background for video

Question

I am trying to put a simple text background on a video that I can change dynamically.

In my html I have:

<div class="row justify-content-center">
    <div id="videoWrapper" class="video-wrapper">
        <video id="videoPlayer" class="azuremediaplayer amp-default-skin"></video>
    </div>
</div>

I found some online code that allowed me to statically display text by creating a CSS variable and an svg element. This works great, repeating the text over the full video.

:root {
    --videoBackground: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='170px' height='50px'> \
    <text x='85' y='30' style='fill:lightBlue; text-anchor: middle' font-size='16'>Background Test</text></svg>");
}

.video-wrapper {
    position: relative;
    width: 1280px;
    height: 960px;
    z-index: 2;
}

.video-wrapper:before {
    content: "";
    position: absolute;
    background-image: var(--videoBackground);
    width: inherit;
    height: inherit;
    z-index: 2;
    opacity: 0.3;
}

I then tried to set the variable using javascript. I tested it using an image file by setting:

document.documentElement.style.setProperty("--videoBackground", "url('/images/test.svg')");

and that worked great.

I then tried to substitute the initial CSS value into the set property.

let newUrlString = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='170px' height='50px'><text x='85' y='30' style='fill:lightBlue; text-anchor: middle' font size='16' > Background JS Test. </text ></svg >";
let encodedURIString = encodeURI(newUrlString);
document.documentElement.style.setProperty("--videoBackground", "url('" + encodedURIString + "')");

I have tried using the encodedURIString and the newUrlString, along with encoding the single quotes with ' (because they appear as double quotes when I look at the data in the Chrome dev tools). I can see the --videoBackground getting set in the DOM tree in Chrome, but when I navigate to the videoWrapper div and inspect the :before element, the background-image value is always none. So, assuming this can be done, I could use some help in how to format the newUrlString and set the property.