Hey there, Im not sure if Im posting this in the right forum section, because I dont know if its a html/css or javascript “bug”. I added a video in front of my website, which is acting as some sort of loading screen. After the video finished playing I first load the background image, which looks similar zu the video, so it seems like a smooth transition. Then I change the video’s display-attribute to none. But I get a slight flickering. This is the code Im using to get it working:
<div id="login">
<div id="username">
<input type="text" name="username" maxlength="12" placeholder="Username" required/>
</div>
<div id="password">
<input type="password" name="password" placeholder="Password" required/>
</div>
<video autoplay muted id="startup">
<source src="movies/start_up.mp4" type="video/mp4">
</video>
</div>
<script>
var vid = document.getElementById("startup");
var url = "images/background.png";
vid.onended = function() {
document.getElementById("body").style.backgroundImage = `url(${url})`;
vid.style.display = "none";
document.getElementById("username").style.display = "block";
document.getElementById("password").style.display = "block";
};
</script>
body {
background-size: 90.5%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-color: #191919;
}
#username, #password {
display: none;
}