Video don’t load in Firefox unless the page is refreshed

I am trying to build my very first website. Everything work fine but I notice that my video won’t load in Firefox unless I refresh the page containing that video. These videos are in webm format that Firefox supports, and they work fine in both Chrome and Safari (albeit in Safari the autoplay does’t work. Not ideal, but can live with it for now). The following are my html tag for the video

{entry.data.vid ? (     
   <video poster="/assets/video/Loading.gif" preload="auto" controls loop muted autoplay>
      <source src={entry.data.vid + ".webm"} type="video/webm">
      Opps. Something went wrong with my video.
   </video>
) : (entry.data.img && (
   <img src={entry.data.img} alt={entry.data.img_alt || ''} />)
)}

As you can see, some pages have videos, the rest only have images (This website is build using Astro framework with animations between pages btw). This same problem persist both on my local machine or hosted on the server. This is a newly installed Firefox with no add-ons.

I tried with other video format (mp4), that doesn’t work either. I tried removing preload=”auto” and autoplay attribute, that doesn’t work as well.
I check the console in Firefox (with control-shift-j) and see the following errors in Parent process whenever I refresh a page (regardless of it containing a video or just an image). Not sure if it is relevant or not.

NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIFaviconService.replaceFaviconDataFromDataURL] loadFavicon resource:///modules/PlacesUIUtils.sys.mjs:213 loadFavicon resource:///modules/PlacesUIUtils.sys.mjs:644 setIconFromLink resource:///actors/LinkHandlerParent.sys.mjs:139 receiveMessage resource:///actors/LinkHandlerParent.sys.mjs:60 LinkHandlerParent.sys.mjs:148:17 setIconFromLink resource:///actors/LinkHandlerParent.sys.mjs:148 receiveMessage resource:///actors/LinkHandlerParent.sys.mjs:60 

When I look at Multiprocess section of the console though, I see the “All candidate resources failed to load. Media load paused.” warning only on page that contains video and only before page refresh Image showing the warning.

Sorry for such a simple question, I am sure this is some very basic problem that only a novice would ask, but I would really appreciate any suggestions that you guys can give.