Unable to use this.player.fullscreen.enter();

[allaboutdeepak]

I need to play video in fullscreen mode on play button click.As per document it should be Entering in full screen mode
on play.Please help closing this issue.

this.player.fullscreen.enter();

import { PlyrComponent } from 'ngx-plyr';
import * as Plyr from 'plyr';

plyr: PlyrComponent;
    player: Plyr;
    options: Plyr.Options = {
      fullscreen: { enabled: true,fallback:'force' },
      autoplay: false,
      settings: ['quality'],
      quality: {default: 576, options: [1080, 720, 576]},
      controls: ['play-large','play', 'progress', 'current-time', 'settings', 'fullscreen'],
      };
  
    videoSources: Plyr.Source[] = [
      {
        src: 'assets/blank.mp4',
        type: 'video/mp4',
        size: 576,
      }
    ];

play()
{
this.player.play();
this.player.fullscreen.enter();
}

html:

<div (plyrEnterFullScreen)="fullScreenEnter($event)"
                (plyrExitFullScreen) ="fullScreenExit($event)" plyr [plyrOptions]="options"  [plyrCrossOrigin]="true" [plyrPlaysInline]="false" [plyrSources]="videoSources" (plyrInit)="player = $event"></div>

[KangHidro]

let try:
HTML: <div ........ (plyrPlay)="fullScreen()" ........ >

TS:

fullScreen() {
  this.player.fullscreen.enter();
}

[arnab-bhattacharjee-codeclouds]

I need to play the video in fullscreen mode when the user is changing the screen orientation to landscape mode. It's not working all the time.

this.so.lock(this.so.ORIENTATIONS.LANDSCAPE_PRIMARY);

[plyrOptions]="{'autoplay': true, 'fullscreen': { 'enabled': true, 'fallback': 'full window/viewport' }, 'hideControls': false, 'ratio': '16:9', 'vimeo': {ratio:'16:9'}}"

This is the code and options I am using.