Full screen for IOS

[onigetoc]

Full screen do not work on IOS device.

[varemenos]

iPhone 6, tested on a real device and collected the info below via browserstack

undefined is not a function (evaluating 'this.tech_[method](arg)')

the method var mentioned above is either enterFullScreen, exitFullScreen args is undefined

[gkatsev]

So, looking into this, there's basically no way of actually putting the youtube video into fullscreen. Youtube doesn't have an API for it. There are two possible solutions:

1. disable fullscreen on those devices
2. allow videojs to use "full window mode"

2 looks something like: Basically, it'll stretch the player to be 100% in both width and height. Unless there are objections, I think we should go with 2.

Thoughts @onigetoc @varemenos?

[gkatsev]

Just realized there's a 3rd option:

3. Always use the native youtube controls on iOS.

This is because on iOS it seems to drop down to the native control bar which does have a fullscreen button.

[onigetoc]

Yes, i though to disable Videojs on IOS, but it's hard because i have one player and mp4 and other video work fullscreen except Youtube, it's will be hard but i guess not impossible with the same player to go back to videojs play to native youtube player with the same player.

[gkatsev]

There's no need to disable videojs. You can just tell videojs to use the native controls instead of using its custom controls.

So, to re-iterate, the 3 options are:

1. disable fullscreen
2. use "full window" mode
3. disable the custom controls and use native iOS controls by default

[onigetoc]

Ok, but for now, i do not how to do it with javascript to diseable the controler and enable it again with the same player based on a Youtube video or not.

[gkatsev]

Ah, I see. I'm not 100% sure, I'll get back to you on that.

[onigetoc]

I did a example here. Mixing Youtube video with MP4 video https://jsfiddle.net/onigetoc/ytntz2ux/

[varemenos]

I'm not entirely sure which is the right option to choose, I will think about it for a bit and get back to you.

What I currently do is:

I wrote a supportsFullscreen() function that detects whether the Fullscreen API is supported or not in the current device which toggles the visibility of the control bar's fullscreen button.

var supportsFullscreen = function () {
    if (document.cancelFullScreen || document.mozCancelFullScreen || document.webkitCancelFullScreen) {
        return true;
    } else {
        return false;
    }
};

Below is part of the video.js configuration that utilizes the supportsFullscreen function.

var videojsPlayer = videojs(
    'my-player',
    {
        controlBar: {
            fullscreenToggle: supportsFullscreen()
        }
    }
);

The player's container handles the position and sizing of the player so I don't really have a use case for the "full window" mode mentioned above.