{
  fullscreen: {
    enterOnRotate: true,         // Enter fullscreen mode on rotating the device in landscape
    exitOnRotate: true,         // Exit fullscreen mode on rotating the device in portrait
    alwaysInLandscapeMode: true, // Always enter fullscreen in landscape mode even when device is in portrait mode (works on chromium, firefox, and ie >= 11)
    iOS: true //Whether to use fake fullscreen on iOS (needed for displaying player controls instead of system controls)
  }
};

import React, { Component } from 'react'
import videojs from 'video.js'
import 'video.js/dist/video-js.css'

// initialize video.js plugins
import 'videojs-youtube'
import 'videojs-landscape-fullscreen'

class Player extends Component {
  componentDidMount() {
    // instantiate Video.js
    this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
      console.log('onPlayerReady', this)
    })
    
    // configure plugins
    this.player.landscapeFullscreen({
      fullscreen: {
        enterOnRotate: true,
        exitOnRotate: true,
        alwaysInLandscapeMode: true,
        iOS: true
      }
    })
  }

  // destroy player on unmount
  componentWillUnmount() {
    if (this.player) {
      this.player.dispose()
    }
  }

  // wrap the player in a div with a `data-vjs-player` attribute
  // so videojs won't create additional wrapper in the DOM
  // see https://github.com/videojs/video.js/pull/3856
  render() {
    return (
      <div>
        <div data-vjs-player>
          <video ref={node => (this.videoNode = node)} className="video-js" />
        </div>
      </div>
    )
  }
}

export default Player

import React from 'react'
import Player from '../components/Player'

// Or Use React-Hooks
export default class Index extends React.Component {
  render() {
    const videoJsOptions = {
      techOrder: ['youtube'],
      autoplay: false,
      controls: true,
      sources: [
        {
          src: 'https://www.youtube.com/watch?v=D8Ymd-OCucs',
          type: 'video/youtube',
        },
      ],
    }

    return <Player {...videoJsOptions} />
  }
}

var videojs = require('video.js');

// The actual plugin function is exported by this module, but it is also
// attached to the `Player.prototype`; so, there is no need to assign it
// to a variable.
require('videojs-landscape-fullscreen');

var player = videojs('some-player-id');

player.landscapeFullscreen();

require(['video.js', 'videojs-landscape-fullscreen'], function(videojs) {
  var player = videojs('some-player-id');

  player.landscapeFullscreen();
});