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.

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

• javascript
• html
• ios
• video
• youtube-api

• Do you have access to the video element, or are you working with an iframe? – Umopepisdn Commented Dec 29, 2015 at 5:41
• I am working with an <iframe>, which is inserted using the Youtube iframe API. developers.google.com/youtube/iframe_api_reference?hl=en – Nisala Commented Dec 29, 2015 at 5:43
• Got it. Sorry, man, I think you may be stuck. – Umopepisdn Commented Dec 29, 2015 at 5:59
• Full screen isn't supported on iOS (caniuse.com/#feat=fullscreen), so what you're trying to exit isn't full screen. I'm curious why this works on the iPad, which does the same for video when it's put in full screen mode. – Umopepisdn Commented Dec 29, 2015 at 6:01
• I guess it would be because on the iPad, the browser was told to go into full screen, so it can set a flag saying "something is full screen" before launching the native player. Whereas on the iPhone, starting playback skips the "enable full screen" step in the browser.. – Umopepisdn Commented Dec 29, 2015 at 6:03

4 Answers 4

I use the following code as a workaround:

When you want to exit the iPhone player:

player.seekTo(2000, true);

This will make the player go to the end of the video and close the fullscreen player.

On Iphone videos plays in Apples own video player. This player is not a html5 element as YouTubes player is. Hence there is no element in Fullscreen on Iphone.

This is not the case on for example Ipad, where YouTubes own player kicks in, enabling the fullscreenmode.

In short: I'm quite sure you can't do this. (Happily proven wrong)

This is impossible. Either you make it switch to the YouTube App, or you use the iOS default player Inside your app.

If you still within your mobile browsers, you may try the following:

Within the youtube api, there is a

YouTube.PlayerState.ENDED

event. This event is triggered when user clicks out of full screen mode. Simply ride on this by adding coding within your current html page to force the browser to close the player to close fullscreen and it will display the original player all over again.

There is a catch, the video will NOT continue playing after the Playerstate.ENDED event. But then you can always relocate what time the video stopped and play it back again.

function takePlayerOutFullscreen(event) {

     if (event.data == YT.PlayerState.ENDED) {
         alert("video ended");

     }
     else if (event.data == YT.PlayerState.PAUSED) {
          alert("video paused");
     }
 }

(Noted: if your mobile browser takes you directly to the native youtube application when the video is being played, then you can do nothing to switch/close the native youtube app and return back to web browser. To prevent mobile broswer to take you directly to the native application. You can go to your phone settings and change the default launch application.)

Hope that helps.