I've found a solution to this.

If you're lazy loading videos - you have to unload them if they are out of viewport. It's strange but iphone got like an limited amount of movies that can be loaded at the same time.

I've tested it even with iPhone 6 and it works!

So here is the code:

document.addEventListener("DOMContentLoaded", function() {


 var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));
    const options = {
          rootMargin: "500px"
        };



 if ("IntersectionObserver" in window) {
  
var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
  entries.forEach(function(video) {
    if (video.isIntersecting) {
      for (var source in video.target.children) {
        var videoSource = video.target.children[source];
        if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
          videoSource.src = videoSource.dataset.src;
        }
      }

      video.target.load();
    } else {
        for (var source in video.target.children) {
            var videoSource = video.target.children[source];
            if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
              videoSource.src = '';
            }
          }
          video.target.load();
    }
  });
}, options);

lazyVideos.forEach(function(lazyVideo) {
  lazyVideoObserver.observe(lazyVideo);
});
  }
});

As you can see i'm loading videos in the if statement (when they are visible), and unloading them in else statement (when they are not visible) and then they're loaded once again when they visible again.

Als in the options i've setted rootmargin to 500px - so loading it's only visible when you're fast scrolling.

That's how it works :) Now you can have million videos on one page.