I have a video, here with: class="myVideo" and this video has autoplay, but it might take the browser a couple of seconds to load the video so that it can be played and so I want to add a loading screen.

I wrote a script that, on page load, runs every 10 milliseconds and checks if my video is already loaded and when it is, it stops running and it tells me that the video is loaded so that I can then remove the loading screen, that I want to first place over my video.

My Problem:

How can I detect the exact size and position of .myVideo on the page and translate that to .myLoadingScreen? (When the page is loaded.)

This is what I have so far:

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

This seems right, but I tried a bunch of things and I did a lot of testing and I just can't get it to work. – It works very occasionally, but most of the time ".myLoadingScreen" is place somewhere at a pretty random location. – But occasionally it does work.

First I thought it's because the browser may need a little bit of time to draw the video and my script just takes the location of the video too early and so I added a setTimeout, but even a long timeout does not change anything.

I really tried to figure this out, but I have no idea what's going on…