[SOLVED] WebVVT (.vtt captions) won't work when uploaded to live site

WebVVT (.vtt captions) won't work when uploaded to live site

hopefully you can help!

On my website's local version, in my file structure I have a file test.vtt, captions for a short video. I'm using Dreamweaver to edit it.

Edit: I'm using Bootstrap 5 framework and using the default video-player.

<div class="embed-responsive">
   <video class="rounded-3" poster="assets/videos/poster.jpg" preload="metadata" controls style="max-width: 100%;" crossorigin="anonymous">
      <source src="assets/videos/video1.mp4" type="video/mp4">
      <track label="English" kind="captions" srclang="en" src="assets/videos/test.vtt" type="text/vtt" default/>
   </video>
</div>

I've connected to the remote server via DreamWeaver FTP, and uploaded the relevant files including test.vtt

When accessing the local website preview in DreamWeaver, the subtitles work flawlessly which is superb! Unfortunately, when I upload all the local files to the remote server and preview the 'live version', on Inspect Element I can see an error:

Failed to load resource: the server responded with a status of 404 (Not Found)

for the file test.vtt - despite me looking at the servers' file structure and finding the file!

Apologies - I'm pretty basic but cannot fathom out how to get the subtitles working on the live version. Anyone have any idea what I could try? I've tried moving the test.vtt file into various levels of folder substructure so it's next to the index, in case it was that! I've tried renaming and re-doing the file from scratch, too.

Any help greatly appreciated!

What I've tried:

Moving the test.vtt file around in the folder hierarchy in case it can't find the file?
Remaking the test.vtt file from scratch,
Naming it something else,
Re-uploading it to remote server alongside the other files required files (which all worked other than test.vtt)
Reading dozens of articles online and trying to re-structure the div to have 'track' both inline and separate but neither solution works. Also tried other bits like 'cross-origin' but doesn't resolve anything.

Appears to be a file issue on server, does it not? Sorry - I'm a bit new to all of this!

Solution

Since the server does not seem to detect the VTT file at all, I am wondering if the server is configured to recognize and serve VTT files. You might need to add a configuration that sets mime type as VTT file. Have you successfully served VTT files from this server before? Here is an article on this subject: HTML5 track captions not showing.