How to make the cue box of subtitles to always be fixed to the bottom of the video

I want the cue box to be fixed to the bottom of the screen. I have subtitle files in .vtt form. I am using webvtt.

.ts file

@ViewChild('cVideo', { read: ElementRef })
  readonly cVideo!: ElementRef<HTMLVideoElement>

ngAfterViewInit(): void {
    const video = this.cVideo.nativeElement;
    const cueTrack = video.textTracks[0];
    if (cueTrack) {
      cueTrack.addEventListener('cuechange', () => {
        const activeCues = cueTrack.activeCues;
        if (activeCues && activeCues.length) {
          const cueBox = (cueTrack.activeCues[0] as any).getCueAsHTML();
          const videoContainer = video.parentElement;
          if (videoContainer) {
            console.log('n-34');
            cueBox.style.position = 'sticky';
            cueBox.style.bottom = '0';
            cueBox.style.width = '100%';
            cueBox.style.left = '0';
            cueBox.style.margin = '0';
            cueBox.style.padding = '0';
            cueBox.style.boxSizing = 'border-box';
            cueBox.style.zIndex = '9999';
            videoContainer.appendChild(cueBox);
            console.log('n-45');
          }
        }
      });
    }
  }

I cannot see the console.log('n-45'); on the console. I also logged cueBox it does show the subtitles text correctly.