Background video of header doesnt display on iPhones

Question

I have seen that I gotta change the format of the video from webm to mp4. Even in mp4, the background video that should play itself, it doesnt play on some iPhones, on other IOS devices the background video it doesnt even exist... I've tried .h264 format, doesnt appear on any devices.

    <header id="header">
  <video id="background-video" loop muted autoplay playsinline>
    <source src="/header/headeriphone.mp4" type="video/mp4">
</video>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var video = document.getElementById('background-video');
    video.play();
  });
</script>

I think i might leave it like that.. some iPhones see the video, some have to play it on their own, some dont see it at all.. Is there any chance i could make that 1min video into a gif? would it work?