Is there a way to go reference a file above html root directory?

HTML-CSS
1

My folder structure is like so:

ProjectFolder
|_Media
  |_video1.mp4
|_Src
  |_index.html

I’m trying to display video1.mp4 that’s located inside the Media folder that is one level above index.html. But the browser can’t access it. If I put the video inside the Src folder, or in a folder that is a subdirectory of Src, the video can be displayed.

Is it possible to select a video (in general, a file) above the folder containing index.html? Or do all files have to be in a subdirectory, and that “…/”, wherever used, must still refer to a path inside Src?

<video controls width="250">
    <source src="../Media/video1.mp4" type="video/mp4" />
</video>
2

Hi,
As far as I know you can access files in the parent folder (ProjectFolder in your example), or folders above it by adding one or more ../ at the beginning of the path.

I just tried to do something similar, and it looks like if you set the file path as ../ProjectFolder/Media/video.mp4, it should work.
Could you try that?

1 Like
3

Thanks for the suggestion. I tried that but it didn’t work.

However, I tried the same path "../Media/video1.mp4" this morning and it worked. Baffling! I checked and the surrounding tags were the same.

4

Ugh. I reopened the folder in VSCode and the issue happened again. I don’t think it has anything to do with the code. I’ll just put all resource files in a subdirectory.

The reason I had it one folder above was so that other projects can access it.

Edited: I don’t think it ever worked, like the post above suggested. I was able to replicate this weird behavior. Turns out VSCode (or maybe the Live Server extension) cached the video while it was a subdirectory and made it seem like the “…/Media/video1.mp4” path worked. When I closed and reopened VSCode, the cache was cleared and it stopped working again.

5

Oh, I haven’t thought about caching!
The first time it actually worked for me I tried something like ../../ProjectFolder/Media/video.mp4, then the shorter version - my apologies, I should’ve mentioned it in the beginning!