FrameworkStyle

FullscreenButton

A button component for toggling fullscreen mode

Features

  • Automatically switches icons based on fullscreen state
  • Works with browser Fullscreen API
  • Falls back gracefully when fullscreen not supported
  • Accessible keyboard navigation

Live Example

Usage

Component 

import { FullscreenButton } from '@videojs/react';
import { FullscreenEnterIcon, FullscreenExitIcon } from '@videojs/react/icons';
import styles from './FullscreenButton.module.css';

/**
 * Basic FullscreenButton example demonstrating:
 * - Icon switching based on fullscreen state
 * - Data attribute state selectors
 * - Enter/exit fullscreen functionality
 *
 * Note: This component must be used within a MediaProvider context.
 * See the usage example in the documentation.
 */
export function BasicFullscreenButton() {
  return (
    <FullscreenButton className={styles.button}>
      <FullscreenEnterIcon className={styles.fullscreenEnterIcon} />
      <FullscreenExitIcon className={styles.fullscreenExitIcon} />
    </FullscreenButton>
  );
}

CSS Module 

.button {
  position: relative;
  display: grid;
  padding: 0.625rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border: none;
  cursor: pointer;
  color: white;
  transition: background 150ms ease;
}

.button:hover {
  background: rgba(255, 255, 255, 0.15);
}

.button:active {
  background: rgba(255, 255, 255, 0.2);
}

/* Icon positioning - both occupy same grid cell */
.fullscreenEnterIcon,
.fullscreenExitIcon {
  grid-area: 1/1;
  transition: opacity 200ms ease;
  width: 18px;
  height: 18px;
}

/* Show/hide icons based on fullscreen state using data attributes */
.button:not([data-fullscreen]) .fullscreenEnterIcon {
  opacity: 1;
}

.button:not([data-fullscreen]) .fullscreenExitIcon {
  opacity: 0;
}

.button[data-fullscreen] .fullscreenEnterIcon {
  opacity: 0;
}

.button[data-fullscreen] .fullscreenExitIcon {
  opacity: 1;
}

Data Attributes

The FullscreenButton automatically sets data attributes based on fullscreen state:

  • data-fullscreen - Present when in fullscreen, absent when not

Use these attributes for state-based styling in your CSS.

Props

All standard button props are supported, plus:

Prop Type Description
children ReactNode Button content (typically icons)
className string CSS class name

Accessibility

  • Automatically includes proper ARIA labels
  • Keyboard accessible (Space/Enter)
  • Announces fullscreen state changes to screen readers

Browser Support

The FullscreenButton uses the standard Fullscreen API, which is supported in all modern browsers.

VideoJS