The problem:

On my website mrgigi.me, I have 3 videos that start playing once the videos are visible in the viewport with javascript's .play()/.pause() API.

However, after a few seconds of playing the videos they all freeze on a frame. Checking in the console if the videos are paused with videoID.paused, returns the boolean false.

Meaning that the browser still thinks that the video is playing without any problems.

Using the play/pause buttons also do not work after the video freezes.

A few things to be noted:

• This only happens on mobile, on desktop it works perfectly fine.
• I am using an iPhone 13 Pro on, at the time of writing, iOS 15.4.1
• I tried different mobile browsers which include:
  1. The default browser, Safari
  2. DuckDuckGo Browser
  3. Brave Browser
• This only happens when the website is deployed/hosted (so going to the website's domain). It works perfectly fine when using a local server like Live Server
• For hosting, I'm using Firebase and Cloudflare

All the code can be found on the GitHub repository: DarthGigi/mrgigi.me

Here are a few videos demonstrating the issue:

1. Video showing the bug
2. Video showing the console output