Adding full screen listener.

[kubanac95]

If a player is set in portrait mode in app after going into fullscreen mode it stays in the portrait scale. In order to fix that I've added a document listener to track webkitfullscreenchange event.

There are also a couple of other events for different browsers, but this one seams to be working fine on Android, on iOS i currently have no ability to validate if event gets triggered properly.

Here's an example usage in my case:

import React, {useRef} from 'react';
import {PixelRatio, Dimensions} from 'react-native';

import YouTubeFrame from 'react-native-youtube-iframe';

import * as ScreenOrientation from 'expo-screen-orientation';

const {width} = Dimensions.get('window');

const height = PixelRatio.roundToNearestPixel(width / (16 / 9));

export default MediaPlayer = ({videoId, play} = {videoId="dQw4w9WgXcQ",play: true}) => {
  const player = useRef(null);

  const onFullScreenChange = isFullScreen => {
    ScreenOrientation.lockAsync(
      isFullScreen
        ? ScreenOrientation.OrientationLock.LANDSCAPE
        : ScreenOrientation.OrientationLock.PORTRAIT,
    ).catch(console.log);
  };

  return (
    <YouTubeFrame
      ref={player}
      play={play}
      width={width}
      height={height}
      videoId={videoId}
      onFullScreenChange={onFullScreenChange}
    />
  );
};

When player enters fullscreen mode I lock the orientation with expo orientation.

Hope this helps someone out. Cheers!

[LonelyCpp]

Hi @kubanac95 I've actually been working on this feature.
(https://github.com/LonelyCpp/react-native-youtube-iframe/tree/fs-callback)

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

I am exploring solutions, but it would be great if you looked into it as well. (#45)

[kubanac95]

@LonelyCpp Does webkitfullscreenchange cause issue on iOS only, since it's working properly on android for me?

[kubanac95]

I found some inspiration from this gist.

Maybe its worth taking a look for iOS since these events seem to fire on iOS only

[LonelyCpp]

I tried to do that, but does not apply directly here. The gist is trying to run some javascript on a page that loads https://www.youtube.com/ directly.

In our case, we let youtube's api to load the player in an iframe. This essentially creates an iframe with youtube's domain, and manipulating anything in it is not allowed because of security issues.

what we need to do is this
document.getElementById("player").contentWindow.document

for which ios throws this
SecurityError: Blocked a frame with origin "null" from accessing a cross-origin frame. Protocols, domains, and ports must match.

Here's a stackoverflow post with more info.