Debut Theme - Videos Not Working on Iphone

[Alex_From_Oriel]

Hi,

I have a problem, that apparently it's a recurring one, with videos not working on iOS, while they are working on macOS, Android, Windows, Linux.
I saw that one issue might be: 

function getVideoOptions(evt) {
    var id = evt.target.getIframe().id;
    return videos[id];
  }

from theme.js, but that was already there so no need for me to change it.
The markup is the following:

<div class="video_wrapper">
    <video autoplay muted loop id="videoPlayer">
        <source src="{{ video_file }}" type="video/webm">
        Your browser does not support the video tag A.K.A. Upgrade your Browser!
    </video>
    <video id="videoPlayerMobile" muted autoplay loop playsinline>
        <source src="{{ video_file_mob }}" type="video/mp4">
        Your browser does not support the video tag A.K.A. Upgrade your Browser!
    </video>
</div>

The javascript I'm using is the following:

function detectMob() {
  return ( window.innerWidth <= 768 );
}
function videoLandingPageManagement(){
  window.addEventListener('DOMContentLoaded', (event) => {
    let videoPlayer = document.getElementById('videoPlayer');
    let videoPlayerMobile = document.getElementById('videoPlayerMobile');
    videoPlayer.style.display="none";
    videoPlayer.style.visibility="hidden";
    videoPlayerMobile.style.display="none";
    videoPlayerMobile.style.visibility="hidden";
    if(detectMob()){
      videoPlayer = videoPlayerMobile;
    }
    videoPlayer.style.display="block";
    videoPlayer.style.visibility="visible";
    let content = document.getElementById('content');
    let playButton = document.getElementById('playButton');
    let pauseButton = document.getElementById('pauseButton');
    let soundOnButton = document.getElementById('soundOnButton');
    let soundOffButton = document.getElementById('soundOffButton');
    soundOffButton.onclick = function(){
      videoPlayer.muted = true;
      soundOffButton.classList.remove("show");
      soundOffButton.classList.add("hide");
      
      soundOnButton.classList.remove("hide");
      soundOnButton.classList.add("show");
    };
    soundOnButton.onclick = function(){
      videoPlayer.muted = false;
      soundOnButton.classList.remove("show");
      soundOnButton.classList.add("hide");
      
      soundOffButton.classList.remove("hide");
      soundOffButton.classList.add("show");
    };
    videoPlayer.loop = true;
    videoPlayer.muted = true;
    videoPlayer.play();
    let wasPlayButtonPressed = false;
    playButton.onclick = function() {
      soundOffButton.classList.remove("hide");
      soundOffButton.classList.add("show");
      content.style.display = 'none';
      videoPlayer.muted = false;
      videoPlayer.play();
      wasPlayButtonPressed = true;
    };
    videoPlayer.onclick = function() {
      videoPlayer.pause();
      soundOnButton.classList.add("hide");
      soundOffButton.classList.add("hide");
      soundOnButton.classList.remove("show");
      soundOffButton.classList.remove("show");
      content.style.display = 'flex';
    };
  });
}videoLandingPageManagement();

The function detectMob() is accessed since the videoPlayerMobile is having its css changed to display:block, but the screen is just black.
The play, sound off and sound on buttons do what they were ment to do if the video would have played.
The only device that is showing black screen is iPhone, regardless of the browser used.

I don't know what I'm doing wrong