Plyr player.source not working for youtube video

Question

I am trying to use Plyr with angular. It works fine for mp4 video file but doesn't work for youtube video. Here's the code

HTML

<div id="video-container" >
      <div id="vplayer" ></div>
  </div>

Component

ngAfterViewInit(): void {

this.player = new Plyr('#vplayer', { controls: [], fullscreen: { enabled: true, iosNative: true, container: '#video-container' }, volume: 1});
    this.player.source = {
      type: 'video' ,
      sources: [       
        {
          src: 'g2Ok2LSzBlk',
          type: 'youtube',
        },
      ],
    };

   this.player.on('ready', (event: any) => {
      this.player.muted = false;
      this.player.play(); 
    });
}

However, if add video id in DIV then video works fine

 <div id="video-container" >
      <div id="vplayer" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>
    </div>

Thanks