How can a web app display a static asset in a popup window?

Question

I'm new to web development, and I'm trying to make a web app for personal use just on my computer that plays a video in a popup window. It needs to be a popup window so I can put the main window on one screen and the video on another. That video is stored locally. I've figured out the basics of opening a popup window with a video player, but the video doesn't load in the popup.

I'm using Svelte, but I think that's coincidental, and that this is a consequence of the app being served--the popup window doesn't have access to the main window's assets. This is starting from a barebones Svelte-Kit project:

<!-- src/routes/index.svelte -->
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

<img src="favicon.png" alt="displays fine in main window"/>

<div>
    <script>
        var popup = window.open('', "popup", "width=200,height=100");
        popup.onload = () => {
            popup.document.body.innerHTML = `<img src="favicon.png" alt="doesn't display in popup">`
        }
    </script>
</div>

Answer 1

Of course, asking the question on SO led me to find the answer...so yes, my problem was opening a popup window with no address--thus outside the application and without access to its resources. All I had to do was put the video player (well, for simplicity's sake, just loading an image in this example) in a separate route and have the popup window open that with window.open('/vidplayer').

routes/index.svelte:

<script>
    var popup = window.open('/vidplayer', "popup", "width=200,height=100");
    popup.onload = () => {
        popup.document.body.innerHTML = `<img src="favicon.png" alt="doesn't display in popup">`
    }
</script>

<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

<img src="favicon.png" alt="displays fine in main window"/>

routes/vidplayer.svelte:

<h1>Welcome to the video player</h1>
<img src="favicon.png" alt="now displays in popup!"/>

But I had tried loading the asset using the absolute path on my system. Why didn't that work? I think it's because the browser can't access files on the local system except when serving local files? For example, I tried opening a window (popup.html) straight from a local index.html file (rather than serving a web app), and the resource loaded.