videojs/video.js · error · Error

Improper value supplied for aspect ratio. The format should

Error message

Improper value supplied for aspect ratio. The format should be width:height, for example 16:9.

What it means

aspectRatio() setter requires a string in width:height form with integer digits on both sides (regex /^\d+\:\d+$/), e.g. '16:9'. The value drives fluid-mode style calculations, so a malformed ratio would produce broken CSS. Setting the value also forces fluid(true).

Source

Thrown at src/js/player.js:1074

  /**
   * A getter/setter for the `Player`'s aspect ratio.
   *
   * @param {string} [ratio]
   *        The value to set the `Player`'s aspect ratio to.
   *
   * @return {string|undefined}
   *         - The current aspect ratio of the `Player` when getting.
   *         - undefined when setting
   */
  aspectRatio(ratio) {
    if (ratio === undefined) {
      return this.aspectRatio_;
    }

    // Check for width:height format
    if (!(/^\d+\:\d+$/).test(ratio)) {
      throw new Error('Improper value supplied for aspect ratio. The format should be width:height, for example 16:9.');
    }
    this.aspectRatio_ = ratio;

    // We're assuming if you set an aspect ratio you want fluid mode,
    // because in fixed mode you could calculate width and height yourself.
    this.fluid(true);

    this.updateStyleEl_();
  }

  /**
   * Update styles of the `Player` element (height, width and aspect ratio).
   *
   * @private
   * @listens Tech#loadedmetadata
   */
  updateStyleEl_() {
    if (window.VIDEOJS_NO_DYNAMIC_STYLE === true) {

View on GitHub (pinned to c3a7e0e6d2)

Solutions

1. Use the exact format 'W:H' with integers: player.aspectRatio('16:9').
2. Normalize input before calling: const r = input.replace('/', ':').trim(); then validate.
3. For decimal ratios, convert to a sensible integer pair (e.g. 1.78 -> '16:9').

Example fix

// before
player.aspectRatio(userInput); // '16/9'
// after
const ratio = String(userInput).replace('/', ':').trim();
if (/^\d+:\d+$/.test(ratio)) player.aspectRatio(ratio);

function setAspectRatio(player, input) {
  const ratio = String(input).replace('/', ':').trim();
  if (!/^\d+:\d+$/.test(ratio)) {
    throw new Error(`invalid aspect ratio: ${input}`);
  }
  player.aspectRatio(ratio);
}

const isAspectRatioString = (v) =>
  typeof v === 'string' && /^\d+:\d+$/.test(v.trim());

When it happens

Trigger: Calling player.aspectRatio('16/9'), player.aspectRatio('1.78'), player.aspectRatio('16:9:2'), player.aspectRatio(' widescreen '), or player.aspectRatio(':9').

Common situations: Reading a ratio from a CMS or user input that uses '16/9' or '1.777'; localized decimal formats; copy-paste from a CSS aspect-ratio value.

Related errors

• No techOrder specified. Did you overwrite videojs.options in
• plugin "${name}" does not exist
• "${lvl}" in not a valid log level
• Component ${componentClassName} does not exist
• currentDimension only accepts width or height value

AI-assisted analysis of videojs/video.js@c3a7e0e6d2 (2026-08-13). Data as JSON: /api/errors/b88fea75bc85b786. Report an issue: GitHub.