{"record":{"id":"b88fea75bc85b786","repo":"videojs/video.js","slug":"improper-value-supplied-for-aspect-ratio-the-form","errorCode":null,"errorMessage":"Improper value supplied for aspect ratio. The format should be width:height, for example 16:9.","messagePattern":"Improper value supplied for aspect ratio\\. The format should be width:height, for example 16:9\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/js/player.js","lineNumber":1074,"sourceCode":"\n  /**\n   * A getter/setter for the `Player`'s aspect ratio.\n   *\n   * @param {string} [ratio]\n   *        The value to set the `Player`'s aspect ratio to.\n   *\n   * @return {string|undefined}\n   *         - The current aspect ratio of the `Player` when getting.\n   *         - undefined when setting\n   */\n  aspectRatio(ratio) {\n    if (ratio === undefined) {\n      return this.aspectRatio_;\n    }\n\n    // Check for width:height format\n    if (!(/^\\d+\\:\\d+$/).test(ratio)) {\n      throw new Error('Improper value supplied for aspect ratio. The format should be width:height, for example 16:9.');\n    }\n    this.aspectRatio_ = ratio;\n\n    // We're assuming if you set an aspect ratio you want fluid mode,\n    // because in fixed mode you could calculate width and height yourself.\n    this.fluid(true);\n\n    this.updateStyleEl_();\n  }\n\n  /**\n   * Update styles of the `Player` element (height, width and aspect ratio).\n   *\n   * @private\n   * @listens Tech#loadedmetadata\n   */\n  updateStyleEl_() {\n    if (window.VIDEOJS_NO_DYNAMIC_STYLE === true) {","sourceCodeStart":1056,"sourceCodeEnd":1092,"githubUrl":"https://github.com/videojs/video.js/blob/c3a7e0e6d20cf5400c9afbee29965fe4dff393c2/src/js/player.js#L1056-L1092","documentation":"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).","triggerScenarios":"Calling player.aspectRatio('16/9'), player.aspectRatio('1.78'), player.aspectRatio('16:9:2'), player.aspectRatio(' widescreen '), or player.aspectRatio(':9').","commonSituations":"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.","solutions":["Use the exact format 'W:H' with integers: player.aspectRatio('16:9').","Normalize input before calling: const r = input.replace('/', ':').trim(); then validate.","For decimal ratios, convert to a sensible integer pair (e.g. 1.78 -> '16:9')."],"exampleFix":"// before\nplayer.aspectRatio(userInput); // '16/9'\n// after\nconst ratio = String(userInput).replace('/', ':').trim();\nif (/^\\d+:\\d+$/.test(ratio)) player.aspectRatio(ratio);","handlingStrategy":"validation","validationCode":"function setAspectRatio(player, input) {\n  const ratio = String(input).replace('/', ':').trim();\n  if (!/^\\d+:\\d+$/.test(ratio)) {\n    throw new Error(`invalid aspect ratio: ${input}`);\n  }\n  player.aspectRatio(ratio);\n}","typeGuard":"const isAspectRatioString = (v) =>\n  typeof v === 'string' && /^\\d+:\\d+$/.test(v.trim());","tryCatchPattern":null,"preventionTips":["Normalize external ratio input ('16/9', '1.78') to 'W:H' before calling.","Whitelist known ratios in config UIs.","Reject empty or whitespace-only values upstream."],"tags":["player","validation","layout","config"],"backgroundTag":null,"analyzedSha":"c3a7e0e6d20cf5400c9afbee29965fe4dff393c2","analyzedAt":"2026-08-13T04:20:15.471Z","schemaVersion":2},"datasetVersion":"2026-08-13T09:17:06.757Z"}