HTML & CSS Help to overlay text

[chrisj]

I have a web page where a page visitor can record from their web cam and then the player displays/plays the recorded video, successfully.
Upon upload, the progress bar appears, and the percentage numbers of progress. I've tried to have the percentage numbers appear over laid on the displayed video without success. Any suggestions to show the percentage numbers over the video screen are appreciated. I have this code:

<span id="progress-text"></span>
<video id="js-video" autoplay muted class="video-js vjs-default-skin" playsinline poster="/images/000.png"></video>

And when I tried this, the screen went white upon upload (but the progress-text (percentage numbers displayed successfully):

<span id="progress-text">
<video id="js-video" autoplay muted class="video-js vjs-default-skin" playsinline poster="/images/000.png"></video>
</span>

I also have this code:

        let blobs = [];
        let stream, mediaRecorder, blob;
        const progressBar = document.querySelector('#progress-bar .bar'),
            progressText = document.querySelector('#progress-text');


etc....

            request.upload.onprogress = function (event) {
                const prog = parseInt(event.loaded / event.total * 100);
                console.log(prog);
                progressBar.style.width = prog + '%';
                progressText.textContent = prog + '%';
            }
            request.send(formData);
        }

Any assistance is appreciated.