Skip to content

ReferenceFeatures

Orientation lock

Screen orientation locking while fullscreen is active

Locks screen orientation while fullscreen is active.

Import

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

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

API Reference

Configuration

Attributes and matching properties the player element accepts. They exist only while this feature is selected.

PropTypeDefaultDetails
orientationLockType
attribute orientation-lock-type
undefined | null | 'any' | 'landscape' | 'landscape-primary' | 'landscape-secondary' | 'natural' | 'portrait' | 'portrait-primary' | 'portrait-secondary''landscape'

State

PropertyTypeDetails
orientationLockType'any' | 'landscape' | 'landscape-primary' | 'landscape-secondary' | 'natural' | 'portrait' | 'portrait-primary' | 'portrait-secondary'

Actions

ActionTypeDetails
setOrientationLockTypefunction

Usage

Selecting the feature adds it to the player.

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.

<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 PlayerController to subscribe to the lock state. Returns undefined if the orientation lock feature is not configured.

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.