I am new to videojs and lightning.js. I tried using document.querySelector but still getting the same error. I thought maybe because of browser, so I tried in chrome, firefox, edge.

TypeError: The element or ID supplied is not valid. (videojs) at videojs (video.es.js:27887) at Function._template (App.js:19) at Function.getTemplateFunc (lightning.js:9068) at new Component (lightning.js:9016) at new App (App.js:4) at Stage.element (lightning.js:13634) at Stage.c (lightning.js:13642) at index.js:117 ,i am getting error in this line -> var player = videojs('myvideo')

import { Lightning, Utils } from '@lightningjs/sdk'
import videojs from 'video.js'

export default class App extends Lightning.Component {
  static getFonts() {
    return [{ family: 'Regular', url: Utils.asset('fonts/Roboto-Regular.ttf') }]
  }

  static _template() {
    var video = document.createElement('video')
    var source = document.createElement('source')
    console.log(video);
    
    video.setAttribute("id","myvideo");
    video.setAttribute("class","video-player");
    source.setAttribute("type", 'video/mp4');
    source.setAttribute("src", "https://github.com/googleboy0/Programming/raw/main/Dilwale%20Dulhania%20Le%20Jayenge%20-%20Trailer%20(with%20English%20Subtitles).mp4")
    video.appendChild(source);
    var player = videojs('myvideo')
    player.play()

  }
}