7

I can't seem to figure out which element should I add the event listener to for it to work on iOS, I'm listening to these events 

['webkitfullscreenchange', 'mozfullscreenchange', 'fullscreenchange', 'MSFullscreenChange'];

and listening on both document and the element you pass to new YT.Player(), both are firing just fine on desktop browsers as well as android browsers, but neither fires on iOS (chrome or safari, doesn't matter).

You can check it live here, at the bottom http://youtubeplayer.fxck.cz/ -1, 1, 2, 3 are the standard youtube player events, 1337 is fullscreenchange from the element, 1338 is fullscreenchange from document.

fxck
  • 4,898
  • 8
  • 56
  • 94
  • 3
    Hey man, just a guess based on some quick research for you: `webkitbeginfullscreen`, `webkitendfullscreen ` Ref: 1) [Apple Developer Docs](https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html#//apple_ref/doc/uid/TP40009523-CH3-SW21) 2) [Polyfill lib discussing support for iOS](https://github.com/neovov/Fullscreen-API-Polyfill/issues/18) – jeremiah.trein Dec 13 '17 at 10:00
  • 1
    caniuse.com lists the Fullscreen API as completely unsupported on iOS Safari: https://caniuse.com/#feat=fullscreen – tech4him Dec 14 '17 at 03:53
  • @tech4him yet it does enter some sort of fullscreen, as you can see on http://youtubeplayer.fxck.cz/ – fxck Dec 14 '17 at 08:13
  • @jtrein doesn't work either, check http://youtubeplayer.fxck.cz/ on ios, added those events as well, still nothing – fxck Dec 14 '17 at 11:12
  • What is the code that you use to call the fullscreen, when you click the fullscreen button? Is it youtube API code, or regular JS DOM code? – tech4him Dec 15 '17 at 14:51
  • @tech4him `addEventListener` on both document and the video element https://gist.github.com/fxck/b19503e62217b583591b33b2be97deb9 – fxck Dec 15 '17 at 16:19
  • I'm asking what actually gets called when I press the "fullscreen" button. – tech4him Dec 15 '17 at 16:23
  • `this.fullscreenRef.nativeElement.requestFullscreen()` (and its vendor-prefixed variants), but that's not the point, iOS enters its own special, undetectable "fullscreen" mode automatically as soon as you hit play, it doesn't support requestFullscreen. – fxck Dec 15 '17 at 17:19
  • did you find a solution? – user924 May 03 '19 at 19:48
  • Unfortunately no. – fxck May 04 '19 at 05:19
  • did you find a solution yet? :) – Snackaholic Oct 01 '21 at 07:30
  • Still nothing. Haven't tried it in a while though, not sure if anything changed on Safari's side. – fxck Oct 01 '21 at 12:43

2 Answers2

2

use the following detection ways:

document.onwebkitfullscreenchange
document.onfullscreenchange
document.onmozfullscreenchange

also use a variable to store whether or not fullscreen was entered

isInFullscreen = false;

the moment one of those above get called we just negate the current state. that way we detect fullscreen changes.

jquery approach example:

 var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
  $(document).on ('mozfullscreenchange webkitfullscreenchange fullscreenchange',function(){
      isFullscreen = !isFullscreen;
  });

you will need to have more indicators to ensure compability with every browser out there.

Snackaholic
  • 590
  • 7
  • 27
  • 2
    `document.onwebkitfullscreenchange` doesn't trigger in this case, that's the whole point. – fxck Dec 13 '17 at 18:54
  • 1
    based on apple doc, you can expand those cases for your needs. In ios, the webkitbeginfullscreen and webkitendfullscreen events fire when a video enters and exits full-screen mode. you can try that. also check for latest updates on your device, might be a thing aswell. https://developer.mozilla.org/en-US/docs/Web/API/Document/onfullscreenchange – Snackaholic Dec 13 '17 at 20:30
  • They do not fire. Check http://youtubeplayer.fxck.cz/ status 1337 and 1338 are fullscreenchange events on element and document respectively. It prints on every single browser, desktop or android, but doesn't on iOS. This is the source code for it https://gist.github.com/fxck/b19503e62217b583591b33b2be97deb9 – fxck Dec 14 '17 at 08:17
  • did you inform apple about this problem already, or found a solution for it? – Snackaholic Dec 13 '19 at 15:06
  • Unfortunately, no. – fxck Dec 13 '19 at 19:04
0

Look similar to iPhone WebApps, is there a way to detect how it was loaded? Home Screen vs Safari? answer/

Did you try:

if (window.navigator.standalone) {
  // fullscreen mode
}

This page could also be helpful

A. STEFANI
  • 6,707
  • 1
  • 23
  • 48
  • That's not the same "fullscreen". It's pretty much chromeless safari, while entering fullscreen on video seems to be some ios specific version of html5 fullscreen api. – fxck Dec 14 '17 at 08:19