Plyr.io player fullscreen function problem on mobile device

Design help Custom code
1

I am using plyr.io as the video player on my website. However, it does not seem to go fullscreen when I test it on my mobile device (desktop and tablets work perfectly fine).

Does anyone have knowledge about this issue and know a simple way to fix it?

Thanks!

Here is my site Read-Only: [LINK][1]

Here is the javascript

document.addEventListener('DOMContentLoaded', () => {    
	 const controls = [
        'play-large', 
        'restart', 
        'play', 
        'progress', 
        'current-time',
        'mute',
        'volume',
        'settings',
        'fullscreen'
];

const player = Plyr.setup('.section-video', { controls });

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

const swiper = new Swiper(".swiper-marquee", {
    slidesPerView: 'auto',
    spaceBetween: 400,
    loop: true,
    speed: 32000,
    allowTouchMove: false,
    autoplay: prefersReducedMotion ? false : {
        delay: 0,
        disableOnInteraction: false,
    },
});

var splide = new Splide(".splide.slider1", {
	type: "loop",
	perPage: 3,
	autoWidth: false,
		focus:'center',
	gap: 80,
	speed: 500,
	easing:"cubic-bezier(0.16, 1, 0.3, 1)",
	autoplay: true,
	interval: 2000,
 	pauseOnHover: true, 
	keyboard: true,
	reduceMotion: {
	speed: 0,
	rewindSpeed:0,
	autoplay:"paused",
    },
     breakpoints: {
	991: { perPage: 2,}, // Tablet},
	767: { perPage: 1,}, // Mobile Landscape
             479: { perPage: 1,}, // Mobile Portrait
}
	}).mount();

	const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
  if (entry.isIntersecting) {
    entry.target.play();
  } else {
    entry.target.pause();
  }
});
},
{
threshold: 0.2 
}
);

const videos = document.querySelectorAll('[wb-embed="video"]');

videos.forEach((video) => {
video.pause();
observer.observe(video);
});

});
2

It seems that the fullscreen functionality of Plyr.io is not working on mobile devices, which could be due to specific restrictions or settings in mobile browsers. A potential solution is to ensure that the fullscreen feature is properly enabled by adjusting the settings of the Plyr player or by using custom JavaScript. You may also need to handle browser-specific restrictions on mobile for fullscreen actions. One approach is to ensure that the fullscreen API is properly supported and triggered on mobile devices by adding event listeners for fullscreen requests. If the issue persists, check that the CSS styles for the player are compatible with mobile and test the fullscreen feature on multiple devices. If you need help with the custom coding part, feel free to reach out.

3

Hi Fiza,

Sure! I’m new to coding and would appreciate your help.

4

sure can you provide me with your email so I can connect with you for a later part?