I have a simple React app where a user may upload a video from their device, and the video is then displayed on the page using a <video> tag.

I've tried uploading several videos from my mobile device to test the app. I have noticed that the app fails to display the video properly when the resolution is large (either the width or height are 4096 pixels). Resolutions of 1920x1080 and even 3840x2160 work just fine. But 4096x2160 consistently results in a blank white screen.

Please note that this seems to only be happening on mobile browsers. When running the app on my PC all videos work fine.

How can I get the app to support videos of larger resolutions? Is there any simple external JS library that can solve this issue?

A link to the a high resolution video that isn't working on mobile (13 seconds, 34 MB)

A screenshot of a working example

A screenshot of a non working example

The deployed app in case you want to try for yourself

The main component's code:

import React, {useState} from 'react';
import './App.css';

function App() {
    let [vid, setVid] = useState(null);

    return vid == null ?
        <input type={"file"} accept={'video/mp4,video/x-m4v,video/*'} onChange={e => onVideoSelected(e, setVid)} /> :
        <video style={{width: '100%', maxWidth: '400px', border: '1px solid black'}} autoPlay={true} muted={true}>
            <source src={vid} type="video/mp4" />
        </video>;
}

function onVideoSelected(e, setVid) {
    let file = e.target.files[0];
    let blob = URL.createObjectURL(file);
    setVid(blob);
}

export default App;

Any help is appreciated.