How in iOS keep playing video after exiting fullscreen and put away additional controls?

On my wordpress site there are a couple of videos that could play in fullscreen mode, but only in iPhones I have an issue with video: it is getting paused when then leaving the fullscreen mode to normal mode and shows both the iOS video player controls and the presto player controls which looks very confusing.
Besides, in iOS 17.2 there is a dark screen in fullscreen mode instead of full length video.

enter image description here

Here is an example of code: 

var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));

if ("IntersectionObserver" in window) {
  var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        var video = entry.target;
        var source = video.querySelector("source");

        // Load and play the video from data-src
        if (source && source.dataset.src) {
          source.src = source.dataset.src;
          video.load();
          video.play();
        }

        video.classList.remove("lazy");
        lazyVideoObserver.unobserve(video);
      }
    });
  });

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

function isIOS() {
  return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
}
// Add event listener to play button
document.querySelectorAll(".playbutton").forEach(function(button) {
  button.addEventListener("click", function() {
    var container = this.closest(".video-container");
    var fa = container.querySelector(".fa");
    var video = container.querySelector("video");
    var source = video.querySelector("source");

    if (video && source) {
      // Pause the current video
      video.pause();

      // Load the full video
      if (source.dataset.fullsrc) {
        source.src = source.dataset.fullsrc;
      }
      video.load();
      video.controls = true;
      video.loop = false;

      // Play the full video in fullscreen mode
      video.addEventListener('loadeddata', function() {
        if (video.requestFullscreen) {
          video.requestFullscreen();
        } else if (video.mozRequestFullScreen) { // Firefox
          video.mozRequestFullScreen();
        } else if (video.webkitRequestFullscreen) { // Chrome, Safari and Opera
          video.webkitRequestFullscreen();
        } else if (video.msRequestFullscreen) { // IE/Edge
          video.msRequestFullscreen();
        } else if (isIOS() && video.webkitEnterFullscreen) { // iOS Safari
          video.webkitEnterFullscreen();
        }

        video.play();
      }, {
        once: true
      });

      // Exit fullscreen and remove controls when the video ends
      video.addEventListener('ended', function() {
        if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.mozCancelFullScreen) { // Firefox
            document.mozCancelFullScreen();
          } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
            document.webkitExitFullscreen();
          } else if (document.msExitFullscreen) { // IE/Edge
            document.msExitFullscreen();
          }
        }
        video.controls = false;
      }, {
        once: true
      });

      // Handle manual exit from fullscreen mode
      var handleFullscreenChange = function() {
        if (!(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement)) {

          video.controls = false;

          if (fa.classList.contains("fa-play") && video.play) {
            fa.classList.remove("fa-play");
            fa.classList.add("fa-pause");
          }

          if (isIOS()) {
            video.controls = false;
            video.play();
          }

          document.removeEventListener('fullscreenchange', handleFullscreenChange);
          document.removeEventListener('mozfullscreenchange', handleFullscreenChange);
          document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
          document.removeEventListener('msfullscreenchange', handleFullscreenChange);
        }
      };
    }
  });
});
<div class="video-wrapper section_video" id="animationvideo">
  <div class="video-container">
    <video class="img-fluid lazy animation-video" width="600" height="400" autoplay loop muted playsinline poster="https://www.w3schools.com/w3css/img_forest.jpg">
       <source data-src="https://www.w3schools.com/html/mov_bbb.mp4" data-fullsrc="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
    </video>
    <button class="playbutton" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="expand-tooltip play-tooltip" data-bs-trigger="hover" title="Pause animation" aria-label="Play or pause this animation by clicking this link">Play full video<i class="fa fa-play" aria-hidden="true"></i></button>
  </div>
</div>

I tried to switch functionality from the wordpress core player to the native player for fullscreen the method of which is described on the forum, but it didn’t help me.

add_action(
    'wp_footer',
    function () { ?>
    <script>
        jQuery(function() {
            if (!wp || !wp.hooks) return;
            wp.hooks.addFilter('presto.playerSettings', 'ios-native-fullscreen', function(settings) {
                settings.fullscreen = { enabled: true, fallback: true, iosNative: true, container: null };
                return settings;
            });
        });
    </script>
        <?php
    }
);