Fullscreen

Fullscreen state and actions for the player store

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

State

State	Type	Description
`fullscreen`	`boolean`	Whether fullscreen is active
`fullscreenAvailability`	`MediaFeatureAvailability`	Whether fullscreen is supported

Actions

Action	Description
`requestFullscreen()`	Enter fullscreen (returns a `Promise`)
`exitFullscreen()`	Exit fullscreen (returns a `Promise`)

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.availability !== 'available') return null;

  return (
    <button onClick={fs.toggle}>
      {fs.active ? '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);
}

API Reference

Parameters

Parameter	Type	Default
`state*`	`object`	`—`

Return Value

MediaFullscreenState | undefined