Splide Video on iOS need to double tap before video loads, android works with one tap

[squidiw]

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

4.1.4

Description

I have a video slider and when on iOS when I click on the play button I have to hit the play icon twice before the video plays. But on Android that doesnt happen.

The version for the video package is "0.8.0"

Attached is gifs of how it works on android and iPhone using browserstack

Below is my code
`export const videoSlider = (element, Video, Splide) => {
if (!element) return;
const mainSlider = element.querySelector(".splide-video");
const thumbnailSlider = element.querySelector(".splide-video-thumbnails");

if (!mainSlider) return;

const main = new Splide(mainSlider, {
	type: "fade",
	rewind: true,
	pagination: false,
	arrows: false,
	height: "14.3125rem",
	mediaQuery: "min",
	breakpoints: {
		1024: {
			height: "30.25rem",
		},
	},
	video: {
		loop: false,
		mute: false,
		autoplay: false,
		playerOptions: {
			controls: true,
			clickToPlay: true,
			keyboard: true,
			playsInline: true,
		},
	},
});

main.on("click", () => {
	const isPlaying = mainSlider.classList.contains("is-playing");
	if (isPlaying) {
		main.Components.Video.pause(main.index);
	} else {
		main.Components.Video.play(main.index);
	}
});

let thumbnails;
if (thumbnailSlider) {
	thumbnails = new Splide(thumbnailSlider, {
		perPage: 4,
		rewind: true,
		gap: "0px",
		pagination: false,
		isNavigation: true,
		mediaQuery: "min",
		breakpoints: {
			1024: {
				perPage: 3,
			},
		},
	});
	main.sync(thumbnails);
}

main.mount({ Video });
if (thumbnails) {
	thumbnails.mount();
}

};
`

Reproduction Link

No response

Steps to Reproduce

Attached screen recording of how it happens

Expected Behaviour

On click the play icon on iOS the video should play immediately like how it does on Android.