[help wanted] Detecting fullscreen on iOS

[LonelyCpp]

On android a simple fullscreenchange event listener on document detects fullscreen. wkwebview on ios does not play by the rules here ☹️

It seems like webkitfullscreenchange event does not fire when attached to document. It only works if you attach it to the <video /> tag. This <video /> tag unfortunately lives inside the iframe and any attempts to access it will throw a CORS error.

tracking branch if you want to contribute - https://github.com/LonelyCpp/react-native-youtube-iframe/tree/fs-callback

[triniwiz]

Dropping this gem for you it should help you

[anisfrontmen]

what is the status of this?

[braincore]

@LonelyCpp Any progress here? Do you know of any other valid approach besides hooking into iOS fullscreen APIs (seen this in the other youtube & video libs)?

[LonelyCpp]

Haven't found any solutions yet :(

Since expo support is critical, native code is not an option

[fhugoduarte]

Hi @LonelyCpp Any solution? I'm using bare workflow.

[microooji]

Hi @LonelyCpp! Any progress here?

[SamiJazmati]

@LonelyCpp I found this recent comment here https://bugs.webkit.org/show_bug.cgi?id=174626

webkitfullscreenchange is dispatched on element fullscreen, not on video fullscreen.

For video fullscreen we dispatch: webkitbeginfullscreenEvent / webkitendfullscreenEvent

However, when using the new element fullscreen, you should now see webkitfullscreenchange, but not webkitpresentationmodechanged or webkitbeginfullscreenEvent

[pelaxa]

An alternative may be to not use the player controls but instead use an overlay for controls which would allow you to detect the orientation. This will also allow further customization of the player for some use cases.

[LonelyCpp]

@pelaxa overlays on the player is not allowed by youtube's ToS. The app will definitely not pass the android store review if detected.

a more native web way would be the ideal solution (similar to chrome)

however you can try your implementation on top of this pacakge and report if it works, as a proof of concept. (others might find it helpful incase they are not planning to put it on the play/app store)

[pelaxa]

Thanks for pointing this out. I did find them here: https://developers.google.com/youtube/terms/required-minimum-functionality#overlays-and-frames