CODEWITHSUNDEEP
javascripthtmliosvideoyoutube-api
Nisala
Nisala

Reputation: 1338

Force iOS iPhone youtube embed player out of fullscreen

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

Upvotes: 14

Views: 3805

Answers (4)

Ahmad Saad
Ahmad Saad

Reputation: 211

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.

Upvotes: 5

Ryan Fung
Ryan Fung

Reputation: 2217

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.

Upvotes: 2

user3507737
user3507737

Reputation: 65

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

Upvotes: 2

Philip G
Philip G

Reputation: 4104

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)

Upvotes: 5

Related Questions