Component

Fullscreen

Fullscreen toggle button using the Fullscreen API.

Overview

The fullscreen button toggles the player container between windowed and fullscreen mode using the browser's Fullscreen API. The entire player container (not just the iframe) enters fullscreen, ensuring that custom controls, popovers, and overlays remain visible.

Usage

standalone-fullscreen.tsx

import { YtcnFullscreen } from "@/components/ytcn/ytcn-fullscreen"

// Used within the controls bar:
<YtcnFullscreen
  isFullscreen={state.isFullscreen}
  onToggle={controls.toggleFullscreen}
/>

Props

Prop	Type	Default	Description
isFullscreen*	boolean	—	Whether the player is currently in fullscreen mode.
onToggle*	() => void	—	Toggle between fullscreen and windowed mode.

iOS behavior

iOS limitation

On iOS Safari, the Fullscreen API is not available for arbitrary elements. When fullscreen is triggered on iOS, the native video player takes over. Custom controls are not visible in this mode. This is a browser limitation, not a ytcn limitation.

Speed

Loader