feat: add enableResponsiveFullscreen option for aspect-ratio-aware fullscreen

[Codinplus31]

This PR introduces a new optional player configuration flag: enableResponsiveFullscreen.

When enabled, the player automatically adjusts fullscreen orientation
based on the video’s dimensions:

• Videos wider than tall open fullscreen in landscape orientation
• Videos taller than wide open fullscreen in portrait orientation

This improves the fullscreen experience for portrait videos (e.g. mobile
recordings, shorts, social media content) without affecting existing
behavior by default.

Usage Example

var vid = document.getElementById('vid1');
var player = videojs(vid, {
  enableResponsiveFullscreen: true
});

Key Points

• Fully opt-in (no breaking changes)
• Does not affect existing fullscreen behavior when disabled
• Works dynamically based on actual video dimensions
• Especially useful for mobile and mixed-orientation content

Motivation

Many modern platforms host both landscape and portrait videos.
Forcing all videos into landscape fullscreen can lead to poor UX,
letterboxing, or awkward scaling.

This feature allows Video.js to adapt fullscreen orientation
intelligently while remaining backward compatible.

Checklist

• - No breaking changes
• -
• - Feature is disabled by default
• -
• - Clear public API (enableResponsiveFullscreen)
• -
• - Code follows existing Video.js patterns

[Codinplus31]

Hi @mister-ben and @amtins, I’d appreciate your review on this feature.
It adds an opt-in enableResponsiveFullscreen flag to improve fullscreen orientation handling.

[Codinplus31]

@mister-ben I noticed you run a workflow for and it cancelled please can you try again and see ?.

[mister-ben]

• "Videos taller than wide open fullscreen in portrait orientation" won't always be true. Some tablets' default orientation is landscape. If a phone or tablet is already landscape when going to fullscreen, default or not, this won't lock to portrait. Would you want the device to lock to portrait orientation in that case, or not, or should that be a separate option?
• I don't love calling this "responsive" because it's such an overloaded term. It's already used within Video.js to refer to conditional layouts based on player size, so it could be confusing.
• Use targetPlayer.videoHeight() rather than targetPlayer.el_.querySelector('video').videoHeight. Although it's less common now, there are playback techs that don't use a video element. Same for videoWidth.
• Run npm lintand resolve the errors. The tests won't run if this doesn't pass. One of the problems is console.warn() - you can use videojs.log.warn() instead.
• Can a test be added?
• fullscreen.html shouldn't be checked in. It will be generated from fullscreen.html.example.

[Codinplus31]

Hello @mister-ben This feature does not lock or force OS-level orientation. If a phone or tablet is already in landscape when entering fullscreen (whether that’s the device’s natural orientation or due to rotation lock), fullscreen remains landscape. Portrait fullscreen is only applied as a layout preference on devices that support rotation and are already in (or rotate into) portrait.

On desktops/laptops and other non-rotatable environments, fullscreen always remains landscape regardless of video aspect ratio; portrait videos are simply letterboxed or scaled to fit, similar to VLC’s behavior.

On naming: I agree that “responsive” is overloaded in Video.js. I’m happy to rename the enableResponsiveFullscreen to enableAdaptiveFullscreen to avoid confusion with existing logic.

var vid = document.getElementById('vid1');
var player = videojs(vid, {
  enableAdaptiveFullscreen: true
});

and for the targetPlayer.el_.querySelector('video').videoHeight i have changed it to targetPlayer.videoHeight() so with the targetPlayer.el_.querySelector('video').videoWidth have been changed to targetPlayer.videoWidth().

and i have resolved all the errors with npm lint.

[Codinplus31]

Hi @mister-ben and @amtins, I’d appreciate your review on this feature.

[Codinplus31]

@mister-ben here is the video on how it works.

Screen_Recording_20260109_165336.mp4