I have a simple php login system where the button calls on the JavaScript function loading() in order to display a div and an mp4 over the login. Kind of like a loading screen that always takes the same duration. The issue I have is whenever I load up the page the div and mp4 css isn't applied, resulting in it being displayed as shown in the video.
If I wait for the mp4 to end however and try again, (or even using CTRL + F5 to refresh) it fixes the issue and displays normally.
Am I doing something wrong resulting in this?
Any help would be much appreciated, thanks.
function loading() {
var overlay = document.getElementById("overlay");
overlay.style.display = 'flex';
}.overlay {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #62a6ff;
width: 350px;
height: 350px;
border-radius: 40px;
border-color: #85baff;
border-style: solid;
border-width: 7px;
box-shadow: 0px 0px 10px 2px #000000;
}
.videoframe {
margin-top: 25%;
margin-left: 7%;
width: 300;
height: 169;
box-shadow: 0px 0px 10px 2px #000000;
background-color: #000000;
}
.backvideo {
width: 300;
height: 169;
}<input class="button" id="submit" type="submit" value="Login" onclick="loading()">
<br>
<br>
<div id="pagechange2"><a href="signup.php">SignUp</a></div>
</form>
</div>
<div id="overlay" class="overlay" style="display:none">
<div id="videoframe" class="videoframe">
<video class="backvideo" autoplay muted crossOrigin="anonymous">
<source src="videos/background3s.mp4" type="video/mp4">
</video>
</div>
</div>I fixed it and got it to work. I changed the following:
<video class="backvideo" autoplay muted crossOrigin="anonymous">
to:
<video id="backvideo" autoplay muted crossOrigin="anonymous">
I changed the class to an id
I then went to my CSS and changed .backvideo to #backvideo and then changed
.videoframe {
margin-top: 25%;
margin-left: 7%;
width: 300;
height: 169;
box-shadow: 0px 0px 10px 2px #000000;
background-color: #000000;
}
.backvideo {
width: 300;
height: 169;
}
to:
.videoframe{
margin-top: 25%;
margin-left: 7%;
width: 300px;
height: 169px;
box-shadow: 0px 0px 10px 2px #000000;
background-color: #000000;
}
#backvideo{
width: 300px;
height: 169px;
}
adding px to both the width and height values