videojs/video.js · error · Error

currentDimension only accepts width or height value

Error message

currentDimension only accepts width or height value

What it means

currentDimension() is restricted to the literal strings 'width' or 'height'. The method reads the computed style for the requested axis via Dom.computedStyle, and any other value would propagate as an invalid CSS property, so video.js fails fast. This is an internal/protected API; user code rarely hits it unless a custom component calls it with a dynamic argument.

Source

Thrown at src/js/component.js:1221

  }

  /**
   * Get the computed width or the height of the component's element.
   *
   * Uses `window.getComputedStyle`.
   *
   * @param {string} widthOrHeight
   *        A string containing 'width' or 'height'. Whichever one you want to get.
   *
   * @return {number}
   *         The dimension that gets asked for or 0 if nothing was set
   *         for that dimension.
   */
  currentDimension(widthOrHeight) {
    let computedWidthOrHeight = 0;

    if (widthOrHeight !== 'width' && widthOrHeight !== 'height') {
      throw new Error('currentDimension only accepts width or height value');
    }

    computedWidthOrHeight = Dom.computedStyle(this.el_, widthOrHeight);

    // remove 'px' from variable and parse as integer
    computedWidthOrHeight = parseFloat(computedWidthOrHeight);

    // if the computed value is still 0, it's possible that the browser is lying
    // and we want to check the offset values.
    // This code also runs wherever getComputedStyle doesn't exist.
    if (computedWidthOrHeight === 0 || isNaN(computedWidthOrHeight)) {
      const rule = `offset${toTitleCase(widthOrHeight)}`;

      computedWidthOrHeight = this.el_[rule];
    }

    return computedWidthOrHeight;
  }

View on GitHub (pinned to c3a7e0e6d2)

Solutions

1. Only pass the literals 'width' or 'height'.
2. If you need a different CSS property, use Dom.computedStyle(el, prop) directly instead of currentDimension.
3. Whitelist the input: if (prop !== 'width' && prop !== 'height') return;

Example fix

// before
const v = comp.currentDimension(this.axis); // this.axis may be 'min-width'
// after
const v = (this.axis === 'width' || this.axis === 'height')
  ? comp.currentDimension(this.axis)
  : parseFloat(Dom.computedStyle(comp.el(), this.axis));

function safeDimension(comp, axis) {
  if (axis !== 'width' && axis !== 'height') return 0;
  return comp.currentDimension(axis);
}

const isWidthOrHeight = (v) => v === 'width' || v === 'height';

When it happens

Trigger: Calling component.currentDimension('width') or currentDimension('height') works; passing any other string (e.g. 'min-width', 'padding', an empty string, or a variable that resolved to undefined) throws.

Common situations: Custom component subclassing that generalizes dimension reads; passing a user-supplied dimension string without whitelisting; refactors that alias the argument.

Related errors

• Illegal component name, "${name}"; must be a non-empty strin
• Illegal component, "${name}"; ${reason}.
• Invalid target for ${objName(obj)}#${fnName}; must be a DOM
• class has illegal whitespace characters
• The element or ID supplied is not valid. (videojs)

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