Video with custom controls not Playing on iOS (safari & chrome)

I'm developing a platform with Django which hosts videos that are uploaded directly on a server. I'm testing the app and the result I got is that the videos are playing fine on Desktop but they are not playing on mobile iOS (safari & chrome), instead they are playing in mobile with android 10. The videos follow the proper format (mp4) and encoding standards (H264, AAC).

I've read different topics that talk about the proper way to trigger and play a video (ex.1 ex.2) on iOS, but even if I'm following this guideline I'm unable to trigger the video to play when pressing the play button. I've no idea what's wrong with it.

Here is the code:

     <div class="c-video">

      <video class="video" id="video" src="{{ video.video.url }}" type='video/mp4' poster="{{ video.image.url }}"> </video>

      <div class="controls">
        <div class="bar">
          <div class="dragger"></div>
          <div class="barline"></div>
        </div>
        <div class="buttons">
          <button id="play-pause"></button>
        </div>
        <div class="volume-slider">
          <input id="vol-control" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>
        </div>
      </div>
     </div>


    <script>

    var video = document.getElementById("video");
    var btn = document.getElementById("play-pause");

    btn.addEventListener('click', function(e) {
        if (video.paused || video.ended) video.play();
        else video.pause();
    });
    </script>

I've also tried to trigger the play event directly from the button as follow but nothing changed:

   <div class="buttons">
   <button id="play-pause" onclick="togglePlay();"></button>
   </div>

   <script>

     var video = document.getElementById("video");
     var btn = document.getElementById("play-pause");

     function togglePlay() {
       if (video.paused || video.ended)
         video.play();
       else
         video.pause();
      }

   </script>

I was dealing with a similar issue and the problem wasn't the video format, but the fact that my API din't support HTTP Range Requests which iOS devices require. Django devel server doesn't seem to support the range requests by default judging based on this ticket, but if you set up apache or nginx to serve your video files it should work fine.

I solved the issue by uploading the videos to AWS S3 and serving them directly from there using pre-signed url. This solution gave me both iOS support and access control for the video.