Fullscreen

Fullscreen state and actions for the player store

Controls fullscreen mode. Tries the container element first, falls back to the media element.

API Reference

State

Property	Type	Details
`fullscreen`	`boolean`
Description Whether fullscreen mode is currently active.
`fullscreenAvailability`	`'available' \| 'unavailable' \| 'unsupported'`
Description Whether fullscreen can be requested on this platform.

Actions

Action	Type	Details
`requestFullscreen`	`() => Promise<void>`
Description Enter fullscreen mode. Tries container first, falls back to media element.
`exitFullscreen`	`() => Promise<void>`
Description Exit fullscreen mode.
`toggleFullscreen`	`() => Promise<void>`
Description Toggle fullscreen mode.

Selector

Pass selectFullscreen to PlayerController to subscribe to fullscreen state. Returns undefined if the fullscreen feature is not configured.

import { selectFullscreen, usePlayer } from '@videojs/react';

function FullscreenButton() {
  const fs = usePlayer(selectFullscreen);
  if (!fs || fs.fullscreenAvailability !== 'available') return null;

  return (
    <button onClick={fs.toggleFullscreen}>
      {fs.fullscreen ? 'Exit fullscreen' : 'Fullscreen'}
    </button>
  );
}

import { createPlayer, MediaElement, selectFullscreen } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';

const { PlayerController, context } = createPlayer({ features: videoFeatures });

class FullscreenButton extends MediaElement {
  readonly #fullscreen = new PlayerController(this, context, selectFullscreen);
}

Screen orientation

Add features.orientationLock to lock screen orientation while fullscreen is active. Unsupported browsers and rejected lock requests are ignored, so iOS Safari continues to use its normal fullscreen behavior.

By default, the feature locks to landscape. Pass a Screen Orientation API type to customize it:

import { createPlayer, features } from '@videojs/react';
import { videoFeatures } from '@videojs/react/video';

const Player = createPlayer({
  features: [...videoFeatures, features.orientationLock({ type: 'portrait' })],
});