Tengo un video , aquí con: class="myVideo" y este video tiene autoplay , pero el navegador puede tardar un par de segundos en cargar el video para que pueda reproducirse, por lo que quiero agregar una pantalla de carga.

Escribí un script que, al cargar la página, se ejecuta cada 10 milisegundos y verifica si mi video ya está cargado y cuando lo está, deja de ejecutarse y me dice que el video está cargado para que luego pueda quitar la pantalla de carga, que Quiero el primer lugar sobre mi video.

Mi problema:

¿Cómo puedo detectar el tamaño y la posición exactos de .myVideo en la página y traducirlo a .myLoadingScreen ? (Cuando se carga la página.)

Esto es lo que tengo hasta ahora:

document.querySelector(".myLoadingScreen").style.top = document.querySelector(".myVideo").getBoundingClientRect().top + "px";

Esto parece correcto, pero probé un montón de cosas e hice muchas pruebas y simplemente no puedo hacer que funcione. – Funciona muy ocasionalmente, pero la mayoría de las veces ".myLoadingScreen" se coloca en algún lugar bastante aleatorio. – Pero de vez en cuando funciona.

Primero pensé que era porque el navegador puede necesitar un poco de tiempo para dibujar el video y mi secuencia de comandos simplemente toma la ubicación del video demasiado pronto, por lo que agregué un setTimeout , pero incluso un tiempo de espera prolongado no cambia nada.

Realmente traté de resolver esto, pero no tengo idea de lo que está pasando...