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

Question

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.

Try -1

.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');
          }
        }
      });
    }
  }

Try -2

I also tried this

ngAfterViewInit(): void {
    const video = this.currentVideo.nativeElement;
    const cueTrack = video.textTracks[0];
    cueTrack.addEventListener('cuechange', () => {
        const activeCues = cueTrack.activeCues;
        if (activeCues && activeCues.length > 0) {
            const activeCue = activeCues[0] as VTTCue;
            const cueBox = activeCue.getCueAsHTML() as HTMLElement;
            const cueBoxHeight = cueBox.getBoundingClientRect().height;
            const videoHeight = video.getBoundingClientRect().height;
            // calculate the position of the cue box based on the height of the video and the cue text
            const cueBoxPosition = videoHeight - cueBoxHeight;
            // set the bottom position of the cue box to the calculated value
            cueBox.style.bottom = `${cueBoxPosition}px`;
        }
    });
}

Try - 2 issues

But I keep getting this error- Conversion of type 'DocumentFragment' to type 'HTMLElement' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. Type 'DocumentFragment' is missing the following properties from type 'HTMLElement': accessKey, accessKeyLabel, autocapitalize, dir, and 224 more. at line const cueBox = activeCue.getCueAsHTML() as HTMLElement;

Try - 1 issue

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

I am not sure if I am going in the right way. Is there an efficient way to do this?