Угловой компонент ngx-youtube-player с паузой воспроизведения div

Question

То, что я пытаюсь сделать с помощью ngx-youtube-player, это сделать div прозрачным поверх него, который при нажатии переключает воспроизведение и приостанавливает видео. Почему я это делаю, потому что в моем Angular проекте много компонентов, и один из способов навигации по нему - использование клавиатуры (стрелки вверх и вниз). На любом проигрывателе Youtube эти элементы управления блокируются.

Как этого добиться?

В video.component.html

<div class="content" (click)="playVideo()"></div>
  <div class="video">
    <youtube-player [videoId]="id" (ready)="savePlayer($event)"(change)="onStateChange($event)">
    </youtube-player>
  </div>

video.component.ts

id = 'btfgGf2wDgI';
 private player;
 private ytEvent;

playVideo() {
    this.player.playVideo();
  }

pauseVideo() {
    this.player.pauseVideo();
  }