Tengo un sistema de inicio de sesión php simple donde el botón llama a la función de JavaScript loading() para mostrar un div y un mp4 sobre el inicio de sesión. Algo así como una pantalla de carga que siempre tiene la misma duración. El problema que tengo es que cada vez que cargo la página, el div y mp4 css no se aplican, lo que hace que se muestre como se muestra en el video.
Sin embargo, si espero a que finalice el mp4 y lo intento de nuevo (o incluso usando CTRL + F5 para actualizar), soluciona el problema y se muestra normalmente.
¿Estoy haciendo algo mal que resulte en esto?
Cualquier ayuda sería muy apreciada, gracias.
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>Lo arreglé y lo hice funcionar. Cambié lo siguiente:
<video class="backvideo" autoplay muted crossOrigin="anonymous">a:
<video id="backvideo" autoplay muted crossOrigin="anonymous"> Cambié la class a una id
Luego fui a mi CSS y cambié .backvideo a #backvideo y luego cambié
.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; }a:
.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; } agregando px a los valores de width y height