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. 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> Run code snippetExpand snippet 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 } );