I have a document that looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
font-family: "Montserrat";
}
</style>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div id="stinger-container">
<video id="stinger">
<source src="gfx/transitions/Wipe02.webm">
</video>
</div>
<div id="container">
</div>
</body>
</html>
And javascript code that looks like this:
var currentScene = "";
function loadStandings(stinger) {
let timeout = 0;
if(stinger) {
let transition = document.getElementById("stinger");
transition.play();
timeout = 750;
}
window.setTimeout(() => {
let request = new XMLHttpRequest();
request.open("GET", "elements/standings.html", true);
request.onload = () => {
if(request.status >= 200 && request.status < 400) {
document.getElementById("container").innerHTML = request.responseText;
}
};
request.send();
}, timeout);
}
loadStandings is called, and the video (that is supposed to be a stinger transition) plays. However, when the timeout hits and the contents of the container div are replaced with what I've loaded, the video immediately disappears into the backdrop and is overlaid with the newly loaded content. It does continue to play in the background, sound and everything, but that's not what I'm looking for.
Instead of the content cutting into the video and making it disappear, I would like the video to stay on top during the loading process - it has an alpha channel and it is supposed to cover the jarring cut from no content -> loaded content.
Is there a way to accomplish this? I have tried every dirty CSS trick that I could think of; setting a z-index does not seem to affect anything either.
#container {
position: absolute;
width: 1920px;
height: 1080px;
z-index: 0;
}
#stinger {
position: absolute;
top: 0;
left: 0;
min-width: 1920px;
min-height: 1080px;
z-index: 1000;
}