React-player: Support for video maximize

[pwbrown]

Is there currently a method that can be called to maximize a video to fullscreen. I have a case where I need to disable the controls for youtube as part of my design, but I still have a separate button that needs to toggle fullscreen.

[rohit-ravikoti]

+1

[cookpete]

The YouTube/Vimeo/HTML5 players do not have a native "fullscreen this video" method for us to hook in to, but there's no reason you can't use something like screenfull (cross-browser JS Fullscreen API wrapper) to maximise the player element:

import React, { Component } from 'react'
import { findDOMNode } from 'react-dom'
import screenfull from 'screenfull'

class App extends Component {
  onClickFullscreen = () => {
    screenfull.request(findDOMNode(this.refs.player))
  }
  render () {
    return (
      <div>
        <ReactPlayer
          ref='player'
          url='https://www.youtube.com/watch?v=Mh5LY4Mz15o'
          playing
        />
        <button onClick={this.onClickFullscreen}>Fullscreen</button>
      </div>
    )
  }
}

Also see a working jsFiddle. Note that youtube videos do not fullscreen correctly due to a missing width: 100% but this is an easy fix. Also note that if you are showing native player controls and click the fullscreen button whilst already in fullscreen mode, things will break and you get trapped in fullscreen mode.

I suppose if there is demand for this we could use screenfull inside ReactPlayer and provide a fullscreen() method.

[oyeanuj]

@CookPete Treating the above comment as a call for vote, so here is a +1 :)

[maxwaiyaki]

How about having controls on fullscreen? When I fullscreen my video, I don't have an idea of how I would show controls.

[pmisiak-emarketer]

@maxwaiyaki I have the same issue you had in the past and I wonder if you got any working solution?

[tonyjmartinez]

@CookPete Is there an example of getting Youtube 'click to fullscreen' working with react-player on iOS? I tried the fullscreen api and it didn't work for iOS and iPad.

This example of youtube/click to fullscreen works on iOS, but I haven't tried using it with react-player yet. https://codepen.io/fregante/pen/GgOvLM

[renjiraND]

@cookpete hey, I'm also having this problem. It's fine if it uses findDOMNode, but now it shows error in strict mode. I tried using ref but actually it doesn't return the same as findDOMNode (it returns an object). Any leads will be helpful thanks!

[neamatmim]

@renjiraND try this

import React, { useRef } from 'react'
import screenfull from 'screenfull'

function App {
  const player = useRef(null);
  const handleClickFullscreen = () => {
    if (screenfull.isEnabled) {
      screenfull.request(player.current.wrapper);
    }
  };
    return (
      <div>
        <ReactPlayer
          ref={player}
          url='https://www.youtube.com/watch?v=Mh5LY4Mz15o'
          playing
        />
        <button onClick={handleClickFullscreen}>Fullscreen</button>
      </div>
    )
}