title: VideoJS Error: The element or ID supplied is not valid
body: <p>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.</p>
  <blockquote>
  <p>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 -&gt; var player = videojs('myvideo')</p>
  </blockquote>
  <pre><code>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(&quot;id&quot;,&quot;myvideo&quot;);
      video.setAttribute(&quot;class&quot;,&quot;video-player&quot;);
      source.setAttribute(&quot;type&quot;, 'video/mp4');
      source.setAttribute(&quot;src&quot;, &quot;https://github.com/googleboy0/Programming/raw/main/Dilwale%20Dulhania%20Le%20Jayenge%20-%20Trailer%20(with%20English%20Subtitles).mp4&quot;)
      video.appendChild(source);
      var player = videojs('myvideo')
      player.play()
  
    }
  }
  </code></pre>