Hiding video in html/css/javascript

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 id="password">
				<input type="password" name="password" placeholder="Password" required/>
			<video autoplay muted id="startup">
				<source src="movies/start_up.mp4" type="video/mp4">
			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";
body {
	background-size: 90.5%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
 	background-color: #191919;

#username, #password {
	display: none;

maybe make the background image be above the video before switching out the video using display: none? (like use z-index).

Perhaps experiment fading in or out using opacity 0 to 1, using keyframes, and property of animation with 2s or something.

I think the fault can be in the resolution of both video and photo. They should be of the same resolution.

How would I use the z-index?

They have the same resolution as far as Im aware of

Like a lot of CSS, that’s a sneaky complex issue. Basically, the higher the z-index, the higher on the "stack order’ the item will have (think of of some papers lying on each other). For example, z-index: 1000 would be on top and z-index: 999 would be below that. To use it, they have to be on top of each other, which isn’t an ordinary behavior for most elements. The elements must have position: relative, fixed, or absolute for them to work.

A typical setup might be a div with position: relative as a container, then maybe two absolutely positioned items inside it that you want to overlap. The one “on top” should have the higher z-index.

I made a little codepen you can play with, if you like: