{"record":{"id":"dfff64820745d313","repo":"videojs/video.js","slug":"the-element-or-id-supplied-is-not-valid-videojs","errorCode":null,"errorMessage":"The element or ID supplied is not valid. (videojs)","messagePattern":"The element or ID supplied is not valid\\. \$videojs\$","errorType":"exception","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"src/js/video.js","lineNumber":146,"sourceCode":" * The `videojs()` function returns a {@link Player|Player} instance.\n */\nfunction videojs(id, options, ready) {\n let player = videojs.getPlayer(id);\n\n if (player) {\n if (options) {\n log.warn(`Player \"${id}\" is already initialised. Options will not be applied.`);\n }\n if (ready) {\n player.ready(ready);\n }\n return player;\n }\n\n const el = (typeof id === 'string') ? Dom.$('#' + normalizeId(id)) : id;\n\n if (!Dom.isEl(el)) {\n throw new TypeError('The element or ID supplied is not valid. (videojs)');\n }\n\n // document.body.contains(el) will only check if el is contained within that one document.\n // This causes problems for elements in iframes.\n // Instead, use the element's ownerDocument instead of the global document.\n // This will make sure that the element is indeed in the dom of that document.\n // Additionally, check that the document in question has a default view.\n // If the document is no longer attached to the dom, the defaultView of the document will be null.\n // If element is inside Shadow DOM (e.g. is part of a Custom element), ownerDocument.body\n // always returns false. Instead, use the Shadow DOM root.\n const inShadowDom = 'getRootNode' in el ? el.getRootNode() instanceof window.ShadowRoot : false;\n const rootNode = inShadowDom ? el.getRootNode() : el.ownerDocument.body;\n\n if (!el.ownerDocument.defaultView || !rootNode.contains(el)) {\n log.warn('The element supplied is not included in the DOM');\n }\n\n options = options || {};","sourceCodeStart":128,"sourceCodeEnd":164,"githubUrl":"https://github.com/videojs/video.js/blob/c3a7e0e6d20cf5400c9afbee29965fe4dff393c2/src/js/video.js#L128-L164","documentation":"Thrown as a TypeError by the videojs(id) factory when the resolved value is not a DOM element. When id is a string, the factory looks up '#'+normalizeId(id) via Dom.$; when id is not a string it is used directly. Dom.isEl then requires nodeType === 1. This surfaces missing elements, wrong types, and DOM-not-ready conditions.","triggerScenarios":"Calling videojs('missing-id'); calling videojs() with no args (id is undefined, used directly, fails isEl); passing a jQuery wrapper, document fragment, text node, or array; running the script before the element is parsed (script in head without defer); passing an element inside a different iframe/shadow root that document.querySelector cannot reach.","commonSituations":"Script in the document head running before DOMContentLoaded; typo in the id attribute; SSR builds where document is mocked; element created later by a framework (React/Vue mount) but videojs() called synchronously before render; double-prefixed id ('#vid' passed as the string, though normalizeId strips a leading '#').","solutions":["Ensure the target element exists in the DOM before calling videojs() (defer the script, or wrap in DOMContentLoaded).","Pass the actual Element reference instead of an id string: videojs(document.getElementById('vid')).","For framework-driven mounts, call videojs() inside the component's onMounted/afterRender hook.","Verify the id spelling and that you are querying the right document (iframe/shadow root)."],"exampleFix":"// before (script in )\nvideojs('vid');\n// after\ndocument.addEventListener('DOMContentLoaded', () => videojs(document.getElementById('vid')));","handlingStrategy":"validation","validationCode":"function safeVideojs(id, options, ready) {\n const el = typeof id === 'string' ? document.getElementById(id.replace(/^#/, '')) : id;\n if (!el || el.nodeType !== 1) {\n throw new TypeError(`videojs: element not found for id ${id}`);\n }\n return videojs(el, options, ready);\n}","typeGuard":"function isDomEl(v) {\n return v !== null && typeof v === 'object' && v.nodeType === 1;\n}","tryCatchPattern":"try {\n return videojs(id, options, ready);\n} catch (err) {\n if (err instanceof TypeError && /element or ID supplied is not valid/.test(err.message)) {\n document.addEventListener('DOMContentLoaded', () => videojs(id, options, ready), { once: true });\n return;\n }\n throw err;\n}","preventionTips":["Resolve the element yourself and pass the Element reference, not an id string.","Run initialization inside DOMContentLoaded or a framework mount hook, not in the document head.","Confirm the element lives in the same document (no cross-iframe/shadow-root lookups)."],"tags":["dom","initialization","bootstrap","validation"],"backgroundTag":null,"analyzedSha":"c3a7e0e6d20cf5400c9afbee29965fe4dff393c2","analyzedAt":"2026-08-13T04:20:15.471Z","schemaVersion":2},"datasetVersion":"2026-08-13T09:17:06.757Z"}