HTML5 video tag fails to display high resolution videos

I have a simple webpage with a <video> tag. I tried assigning the src attribute of the video tag with URLs of two different videos, both about 2 and a half seconds long:

The first video has a frame resolution of 3840x2160. JSFiddle: https://jsfiddle.net/u2sgawk7/2/

The second video has a frame resolution of 4096x2160. JSFiddle: https://jsfiddle.net/u2sgawk7/3/

I'm encountering a problem with the second video when loading the webpage from Google Chrome on my mobile device (Galaxy S10). The first JSFiddle works perfectly fine on all devices. The second JSFiddle seems to work fine on desktop browsers, but simply displays a blank white screen when I open it on my mobile device (on Google Chrome for example).

I've tested this functionality using many other video files, and it is clear that the frame resolution is the decisive factor here: the problem occurred with every single video with a resolution of 4096x2160, and only with these videos.

I tried using this website: https://clideo.com/crop-video, to test whether or not it is even possible to display high resolution videos on mobile. I uploaded the second video (the one that was causing a white screen), and it was successfully displayed using a video tag on that website - both on desktop and on mobile!

What am I doing wrong? Any help to resolve this would be appreciated.

Once again just to clarify:

The issue does not happen on desktop browsers at all.

The issue does not happen on FireFox on my Galaxy S10.

The issue happens on every other browser I tried on my Galaxy S10, as well as in Safari on iPhone.

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum