VR Button is not split the video screen instead shown black screen.

[dj4385]

I am using videojs 7.17.0 and panoroma in angular 12 application. But when we click on VRButton then screen is not split in two parts instead of that show black screen. Please help me to fix it.

code:

HTML File:
<video class="video-js vjs-default-skin" 
    crossorigin="anonymous" poster="assets/poster.jpg"   preload="none"
     controls   style="object-fit:cover" width="774px" height="400.75px">
  <source [src]="videoLink" type="video/mp4"   #source/>
</video>
-----------------------------
ts file

this.player = (window as any).player = videojs(this.video?.nativeElement, {}, function () { });
this.player.panorama({
      clickAndDrag: true,
      clickToToggle: true,
      autoMobileOrientation: true,
      callback: function () {
        if(this.player) {
          this.player.play();
        }
      }
    });

[dj4385]

Expected Result: