Play Youtube iframe full screen

Question

I've got a page with a embedded Youtube video in a iframe. I want to set the video to full screen whenever someone plays the video. I've tried many things but can't seem to get it working.

My code:

<div class="video-wrapper">
    <div class="video">
        <iframe id="home-video" allowfullscreen="allowfullscreen"     mozallowfullscreen="mozallowfullscreen"
                                        msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen"
                                        webkitallowfullscreen="webkitallowfullscreen" frameborder="0"
                                        src="https://www.youtube.com/watch_popup?v=dQw4w9WgXcQ">
        </iframe>
    </div>
</div>

I also tried to accomplish this with the Youtube Api, but without success.

 <script src="https://www.youtube.com/iframe_api"></script>

Anyone?

Answer 1

I would try the fullScreen API for HTML5:

function fullScreen() {

    var e = document.getElementById("video-wrapper");
    if (e.requestFullscreen) {
        e.requestFullscreen();
    } else if (e.webkitRequestFullscreen) {
        e.webkitRequestFullscreen();
    } else if (e.mozRequestFullScreen) {
        e.mozRequestFullScreen();
    } else if (e.msRequestFullscreen) {
        e.msRequestFullscreen();
    }
}

function YTStateChange(event) {
    switch(event.data) {
        case -1:
            fullScreen();
        break;
        case 1:
            // some code
        break;
        case 2:
            // some code 
        break;
        default:
        break;
    }
}

$(document).ready(function () {
    var player = new YT.Player( 'video-wrapper', {
        events: { 'onStateChange': YTStateChange }
    });
});

Answer 2

Use the youtube Iframe Api and set it up to listen to player events: https://developers.google.com/youtube/iframe_api_reference

Once you get the play event call your fullscreen function

            function launchIntoFullscreen(element) {
              if(element.requestFullscreen) {
                element.requestFullscreen();
              } else if(element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
              } else if(element.webkitRequestFullscreen) {
                element.webkitRequestFullscreen();
              } else if(element.msRequestFullscreen) {
                element.msRequestFullscreen();
              }
            }

            function onPlayerStateChange(event) {
              if (event.data == YT.PlayerState.PLAYING) {
                 launchIntoFullscreen(YOURIFRAME)
              }
            }

Answer 3

Using React Native...

I made this useEffect that works nicely. The only issue is that I'm using React Native Youtube Iframe and it does not listen for full screen requests on iOS yet, so that I had to add my own full screen button. If anyone has an idea on how to help the library owner, it would be welcomed. ;-) https://github.com/LonelyCpp/react-native-youtube-iframe/issues/45

This useEffect works by listening a playerFullScreen variable and changing the frame that holds the player style, as well as the screen orientation.

So that the player don't actually go full screen. It is the view that holds it that takes all the place of the screen.

// rely on useDimension and screen dimensions since useWindowsDimensions seems to have some issues with iFrames on React 0.63
// https://github.com/facebook/react-native/issues/29451
import { useDimensions } from '@react-native-community/hooks'
import Orientation from 'react-native-orientation-locker'

const windowWidth = useDimensions().screen.width
const windowHeight = useDimensions().screen.height

/** Change the layout when the player goes fullscreen */
  useEffect(() => {

    // constants
    const boxedViewStyle: ViewStyle = {
      position: 'absolute',
      right: 0,
      left: 0,
      zIndex: 1,
    }

    const fullscreenViewStyle: ViewStyle = {
      position: 'absolute',
      top: 0,
      right: 0,
      left: 0,
      bottom: 0,
      zIndex: 2,
    }

    // Do the magic trick to change everything
    if (mounted) {
      if (playerFullScreen) {
        Orientation.lockToLandscape() // View horizontal
        setPlayerViewStyle(fullscreenViewStyle)
        setPlayerWidth(windowWidth)
        setPlayerHeight(windowHeight)
      } else {
        Orientation.lockToPortrait() // View
        setPlayerViewStyle(boxedViewStyle)
        setPlayerWidth(windowWidth)
        setPlayerHeight(PixelRatio.roundToNearestPixel(windowWidth / (16 / 9)))
      }
    }

    return (): void => {
      Orientation.lockToPortrait()
    }

  }, [playerFullScreen, windowHeight, windowWidth])

Here is what the JSX is looking like:

    return (
      <View style={[styles.playerView, playerViewStyle]}>
        {playerFullScreen && <StatusBar hidden={true} />}
        <YoutubePlayer
          videoId={videoId}
          play={mediaPlayerIsUp}
          onChangeState={onStateChange}
          height={playerHeight}
          initialPlayerParams={{
            preventFullScreen: true,
          }}
          onError={(error): void => {
            console.log('ERROR > MediaPlayerBox > YoutubePlayer: ', error)
          }}
          forceAndroidAutoplay={Platform.OS === 'android'}
        />
        <View style={styles.fullScreen}>
          <TouchableOpacity activeOpacity={0.8} onPress={toggleFullScreen}>
            <Icon path={paths.mdiFullscreen} color={colors.darkGrey} size={40} />
          </TouchableOpacity>
        </View>
        <View style={styles.close}>
          <TouchableOpacity activeOpacity={0.8} onPress={onClose}>
            <Icon path={paths.mdiClose} color={colors.darkGrey} size={40} />
          </TouchableOpacity>
        </View>
      </View>
    )

Notice the preventFullScreen that hides the fullscreen button of the player to use the one it is repaced by. It would actually be better to use a lister on the fullscreen button from YouTube once the issue on React Native Youtube Iframe will be solved.

Notice also the trick to hide the status bar, to look like full screen.