React video component not working properly

I’ve been having an issue with a video element not displaying at all on Safari (iPhone and MacBook Pro). However, this only seems to be an issue when I’m using HTTPS vs HTTP. It seems to work flawlessly on HTTP for Safari.

I seriously appreciate any help I can get!

<video className="hero-video" autoPlay loop muted playsInline controls={false}>
        <source src="/hero-video.mp4" type="video/mp4"/>
        Your browser does not support the video tag.
</video>

I’ve tried to look at other threads on stack, but nothing seems to work. Again, help would be greatly appreciated!