I am creating a website where a user watches a video, and answers questions along the way. However, I am having one problem. When a user watches the YouTube embeded video on an iPhone, it launches in the iOS player, not the YouTube player. When I attempt to take the player out of fullscreen, instead of doing it, it pauses the video and just sits there. I am using this code:
if (
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement
) {
// exit full-screen
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
This works on everything EXCEPT the iOS iPhone player. I have tried hiding the player as well, but that doesn't work either. Is there a way to get the player out of fullscreen, or some kind of workaround? Thank you!
NOTE: I am using the Youtube iframe API. https://developers.google.com/youtube/iframe_api_reference?hl=en