Inline Video + z-index

[Lauren Kelly]

Apologies if this isn't the right place to ask this, but I'm not sure I'm going to get much help on this elsewhere.

I am working on a layout for a Brightsign machine that uses Chromium as the browser. I need to show an inline video and layer text/images over the playing video.

It functions properly (autoplays, loops, etc) but no it is always covering the test text area, almost like it's ignoring the z-index. I've tried adding the z-index and even adding it to the DOM after the video starts playing, but it's always on top.

For reference, my HTML:

    <span id="text">test</span>
    <video playsinline autoplay muted loop>
        <source src="https://rawgit.com/bower-media-samples/big-buck-bunny-480p-30s/master/video.mp4" type="video/mp4"></source>
    </video>

and CSS:

    video {
        width: 300px;
        height: 300px;
        object-fit: cover;
        position: fixed;
        z-index: -1;
        top: 50px;
        left: 0;
    }

    #text {
        color: red;
        font-size: 100px;
        position: fixed;
        z-index: 9999;
    }

I made a jsfiddle where you can see that the code functions in FF/Chrome/Safari, so I'm not sure why it wouldn't work on Chromium. I have a Stack Overflow question too, in case this isn't the place to discuss this.

Thank you!