I'm working on a Vue app but the issue is more vanilla

when I create video element dynamically with

document.createElement('video')

and assign the src,

I can see it download the video on the network tools even if it's not added on the page, which is the behaviour I want .

However, when I add it to the page with document.addChild, it loads the video again from the src, how do I avoid this? It should use the existing video data.

The reason that I wanted to do this is to cache lots of video data while the user is in a different part of the journey.

Note, I am seeing this behaviour in Brave Browser but not Firefox or safari.