Skip to main content
FullscreenButton toggles fullscreen mode. It detects platform support through an availability state — when fullscreen is "unsupported", the toggle does nothing.
Requires the fullscreen feature to be registered with the player.

​
Import

import { FullscreenButton } from '@videojs/react';

​
Basic Usage

import { FullscreenButton } from '@videojs/react';

function PlayerControls() {
  return <FullscreenButton />;
}

​
Custom Render

import { EnterFullscreenIcon, ExitFullscreenIcon } from './icons';
import { FullscreenButton } from '@videojs/react';

function PlayerControls() {
  return (
    <FullscreenButton
      render={(props, state) => (
        <button {...props}>
          {state.fullscreen ? <ExitFullscreenIcon /> : <EnterFullscreenIcon />}
        </button>
      )}
    />
  );
}

​
Props

​
render
ReactElement | ((props: HTMLProps, state: FullscreenButton.State) => ReactElement | null)
Custom render prop. Receives the computed HTML props and current state.
​
label
string | ((state: FullscreenButton.State) => string)
Override the automatic aria-label. By default: "Enter fullscreen" or "Exit fullscreen".
​
disabled
boolean
Disables the button.
​
className
string | ((state: FullscreenButton.State) => string)
CSS class name or a function that receives state and returns a class name.
​
style
CSSProperties | ((state: FullscreenButton.State) => CSSProperties)
Inline style or a function that receives state and returns a style object.

​
State Data Attributes

AttributeValue / Description
data-fullscreenPresent when in fullscreen mode.
data-availability"available" | "unavailable" | "unsupported" — platform support status.

​
CSS Styling Example

/* Hide when unsupported */
.fullscreen-button[data-availability="unsupported"] {
  display: none;
}

/* Style when in fullscreen */
.fullscreen-button[data-fullscreen] {
  color: white;
}

​
Accessibility

Renders a <button> element. The aria-label updates automatically: "Enter fullscreen" or "Exit fullscreen". Keyboard activation: Enter / Space.

Build docs developers (and LLMs) love

Get started for freeTalk to us