FullscreenButton

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 VideoProvider 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>
  );
}

.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;
}

<media-fullscreen-button>
  <media-fullscreen-enter-icon></media-fullscreen-enter-icon>
  <media-fullscreen-exit-icon></media-fullscreen-exit-icon>
</media-fullscreen-button>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 2rem;
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
  background: #0a0a0a;
  color: white;
}

.demo-container {
  max-width: 800px;
  margin: 0 auto;
}

.media-container {
  position: relative;
  width: 100%;
  max-width: 640px;
}

video {
  width: 100%;
  height: auto;
  display: block;
}

.controls {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 10;
}

media-fullscreen-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;
}

media-fullscreen-button:hover {
  background: rgba(255, 255, 255, 0.15);
}

media-fullscreen-button:active {
  background: rgba(255, 255, 255, 0.2);
}

/* Icon positioning - both occupy same grid cell */
media-fullscreen-enter-icon,
media-fullscreen-exit-icon {
  grid-area: 1/1;
  transition: opacity 200ms ease;
  width: 18px;
  height: 18px;
}

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

media-fullscreen-button:not([data-fullscreen]) media-fullscreen-exit-icon {
  opacity: 0;
}

media-fullscreen-button[data-fullscreen] media-fullscreen-enter-icon {
  opacity: 0;
}

media-fullscreen-button[data-fullscreen] media-fullscreen-exit-icon {
  opacity: 1;
}

import '@videojs/html/define/media-fullscreen-button';
import '@videojs/html/icons';

// The web components will automatically register themselves
// No additional setup needed