ReferenceFeatures

Fullscreen

Fullscreen state and actions for the player store

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

Import

import { fullscreenFeature } from '@videojs/html';

The liveVideoFeatures and videoFeatures feature bundles include this feature.

API Reference

State

Property	Type	Details
`fullscreen`	`boolean`
Description Whether fullscreen mode is currently active.
`fullscreenAvailability`	`'available' \| 'unavailable' \| 'unsupported'`
Description Whether fullscreen can be requested on this platform.

Actions

Action	Type	Details
`requestFullscreen`	`function`
Description Enter fullscreen mode. Tries container first, falls back to media element. Type `() => Promise<void>`
`exitFullscreen`	`function`
Description Exit fullscreen mode. Type `() => Promise<void>`
`toggleFullscreen`	`function`
Description Toggle fullscreen mode. Type `() => Promise<void>`

Selector

Pass selectFullscreen to PlayerController to subscribe to fullscreen state. Returns undefined if the fullscreen feature is not configured.

import { createPlayer, UIElement, selectFullscreen } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';

const { PlayerController } = createPlayer({ features: videoFeatures });

class FullscreenButton extends UIElement {
  readonly #fullscreen = new PlayerController(this, selectFullscreen);
}

Screen orientation

Add features.orientationLock to lock screen orientation while fullscreen is active. Unsupported browsers and rejected lock requests are ignored, so iOS Safari continues to use its normal fullscreen behavior.

The feature locks to landscape unless the provider sets another Screen Orientation API type.

<my-player orientation-lock-type="portrait">
  <video src="/video.mp4"></video>
</my-player>

See Orientation lock for the player setup.