html - MP4/H.264 video background not showing in IPad or IPhone (playsinline included)

Question

I've been trying to display a video background for a web page in a Koa framework. Being brief the HTML is the following:

<video class="col-12 nopadding" id="vid" loop muted autoplay playsinline>
</video>

<div class="over">
<h1>?Lorem ipsum dolor sit?</h1>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit primis</p>
<button class="btn btn-primary btn-xl" type="button" onclick="window.location.href='#firma'">Lorem</button>
</div>

The <h1> and <p> are transposed to be in front of the video background and Bootstrap is also used, the source of the video is added by Javascript at the end which select the src by first figure out the viewport size (mobile/desktop) to fit screen dimensions:

 <script>
  var w = window.matchMedia("(max-width: 769px)");
  var vid = document.getElementById("vid");
  var source = document.createElement("source");
  source.id = "hvid";
  source.setAttribute("type", "video/mp4");
  vid.appendChild(source);
  
  if (w.matches) {
    vid.pause();
    vid.setAttribute("poster", "<%= assetPath('poster_2-3.jpg') %>");
    source.removeAttribute("src");
    source.setAttribute("src", "light_2-3.mp4");
    vid.load();
    vid.play();
  } else {
    vid.pause();
    vid.setAttribute("poster", "<%= assetPath('poster_9-16.jpg') %>");
    source.removeAttribute("src");
    source.setAttribute("src", "light_9-16.mp4");
    vid.load();
    vid.play();
  }

</script>

Both videos have the right codec (I think) to be compatible with iOS, as the ffmpeg configuration shows:

ffmpeg -i input.mp4 -vcodec libx264 -pix_fmt yuv420p -profile:v baseline -level 3.1 -b:v 200K -r 30 light_2-3.mp4

The video background works perfectly in Safari, Chrome and Android mobile devices, put the video is simply not shown in IPhone nor IPad (was a white, empty rectangle before I added a poster). The Codec seems right, and the playsinline and muted attributes are on the video tag, and after days of research I can't find any new solution.

Any ideas?

Here is an example of the video background

Answer 1

等待大神答复