We use DigitalOcean spaces as a storage for media files. When I try to play any uploaded video with react-player I only see a crossed-out play button. The problem only occurs on iOS devices both in Chrome and Safari.

screenshot

Here is what my component looks like

                <ReactPlayer
                    url="https://appname.nyc3.digitaloceanspaces.com/username/folder_id/file_id"
                    playsInline
                    controls
                    loop
                    height="100%"
                    width="100%"
                />

digital ocean preview of the video

The video was shot on iPhone's native camera via file input with capture attribute and uploaded to DigitalOcean using multipart upload.

CORS settings are set to allow all origins on DO and I do not receive any CORS error while trying to play the video