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>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
}
);