Orientation lock

Screen orientation locking while fullscreen is active

Locks screen orientation while fullscreen is active.

Import

import { orientationLockFeature } from '@videojs/react';

No packaged feature bundle includes this feature — add it to your createPlayer features yourself.

API Reference

Configuration

Props the Player component 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: 'any' \| 'landscape' \| 'landscape-primary' \| 'landscape-secondary' \| 'natural' \| 'portrait' \| 'portrait-primary' \| 'portrait-secondary' \| null \| undefined) => 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 { Container, createPlayer, features } from '@videojs/react';
import { videoFeatures } from '@videojs/react/video';

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

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

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

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 orientationLockType="portrait">
  <Container>
    <video src="/video.mp4" />
  </Container>
</Player>

<my-player orientation-lock-type="portrait">
  <video 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, UIElement, selectOrientationLock } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';

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

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

Unsupported browsers and rejected lock requests are ignored.