Orientation lock

Screen orientation locking while fullscreen is active

Locks screen orientation while fullscreen is active. Add it explicitly to a feature list; it is not included in the default video presets.

API Reference

Configuration

Props the player provider accepts. They exist only while this feature is selected.

Prop	Type	Default	Details
`orientationLockType`	`undefined \| null \| 'any' \| 'landscape' \| 'landscape-primary' \| 'landscape-secondary' \| 'natural' \| 'portrait' \| 'portrait-primary' \| 'portrait-secondary'`	`'landscape'`
Description Screen orientation type to lock while fullscreen is active.

State

Property	Type	Details
`orientationLockType`	`'any' \| 'landscape' \| 'landscape-primary' \| 'landscape-secondary' \| 'natural' \| 'portrait' \| 'portrait-primary' \| 'portrait-secondary'`
Description Screen orientation type locked while fullscreen is active.

Actions

Action	Type	Details
`setOrientationLockType`	`(value: undefined \| null \| 'any' \| 'landscape' \| 'landscape-primary' \| 'landscape-secondary' \| 'natural' \| 'portrait' \| 'portrait-primary' \| 'portrait-secondary') => void`
Description Sets the locked orientation type. Absent input — nullish, or the empty string a valueless HTML attribute produces — restores the default.

Usage

Selecting the feature adds it to the player.

import { createPlayer, features } from '@videojs/react';
import { videoFeatures } from '@videojs/react/video';

export const Player = createPlayer({
  features: [...videoFeatures, features.orientationLock],
});

import { createPlayer, features, MediaElement } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';

const { ProviderMixin } = createPlayer({
  features: [...videoFeatures, features.orientationLock],
});

class MyPlayer extends ProviderMixin(MediaElement) {}

customElements.define('my-player', MyPlayer);

Orientation type

The feature locks to landscape unless the provider sets another Screen Orientation API type. The value can change while the player is running; if the screen is already locked, it re-locks to the new type.

<Player.Provider orientationLockType="portrait">
  <Player.Container />
</Player.Provider>

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

The attribute only exists on a player that selected the feature. Setting it on an element built from videoFeatures alone does nothing.

Clearing the value restores landscape.

Selector

Pass selectOrientationLock to usePlayer to subscribe to the lock state. Returns undefined if the orientation lock feature is not configured.

import { selectOrientationLock, usePlayer } from '@videojs/react';

function OrientationToggle() {
  const lock = usePlayer(selectOrientationLock);
  if (!lock) return null;

  return (
    <button onClick={() => lock.setOrientationLockType('portrait')}>
      Lock portrait
    </button>
  );
}

import { createPlayer, features, MediaElement, selectOrientationLock } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';

const { PlayerController, context } = createPlayer({
  features: [...videoFeatures, features.orientationLock],
});

class OrientationToggle extends MediaElement {
  readonly #lock = new PlayerController(this, context, selectOrientationLock);
}

Unsupported browsers and rejected lock requests are ignored.