'Angular Youtube Player - Fit to 100% height

I use the Youtube Angular pakacge in my Angular 11 project. I would like to fill the player to 100% of the divs height, which is a TailWind h-full div:

<div class="flex flex-col flex-auto w-full h-full xs:p-2" #videoContainer>
    <youtube-player
            *ngIf="videoId"
            [videoId]="videoId"
            width="100%"
            [height]="videoHeight"
    ></youtube-player>
</div>

I tried to do this in two different eays already:

#1 height="100%" or height="100vh"

Both leads to: 100% Height

#2 Dynamic Height

[height]="videoHeight"

ngOnInit() {

    this._params = this._route.params.subscribe((params) => {
        this.videoId = params['videoId'];
    });

}

ngAfterViewInit(): void {
    this.videoHeight = this.videoContainer.nativeElement.offsetHeight;
}

This works, but leads to

Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '905'..

#3 Move videoHeight

I moved this.videoHeight = this.videoContainer.nativeElement.offsetHeight; to the constructor and in the OnInit this leads to:

TypeError: Cannot read property 'nativeElement' of undefined at new YoutubeComponent

What am I doing wrong?

cssangularyoutube


Solution 1:[1]

  1. Try height="100vh"
  2. Try assigning value to videoHeight during declaration or in constructor or in ngOnInit hook.

Solution 2:[2]

Here is how I solved it, I created new component:

ng g component components/yt-player

In yt-player.component.html add container with ref and youtube-player

<div #youTubePlayer >
    <youtube-player [width]="videoWidth" [height]="videoHeight" [videoId]="videoID"></youtube-player>
</div>

and in yt-player.component.ts add this code:

export class YtPlayerComponent implements AfterViewInit {
  @ViewChild('youTubePlayer') youTubePlayer: ElementRef<HTMLDivElement>;

  videoHeight: number | undefined;
  videoWidth: number | undefined;

  @Input('videoID') videoID: string;

  constructor(private changeDetectorRef: ChangeDetectorRef) {}

  ngAfterViewInit(): void {
    this.onResize();
    window.addEventListener('resize', this.onResize.bind(this));
  }

  onResize(): void {
        // you can remove this line if you want to have wider video player than 1200px
    this.videoWidth = Math.min(
      this.youTubePlayer.nativeElement.clientWidth,
      1200
    );
        // so you keep the ratio
    this.videoHeight = this.videoWidth * 0.6;
    this.changeDetectorRef.detectChanges();
  }
}

The code is basiclly self explenatory, you have refrence on the container of youtube-player, in afterViewInit you set videoHeight and videoWidth, to corespond to the width of the container. We set up event listener in the case of size changes to update the width and height. And in the end we add @Input('videoID') videoID: string so we can pass the id to the youtube-player component. So we can use it like this:

<yt-player videoID="oHg5SJYRHA0"></yt-player>

Solution 3:[3]

Remove any attempt to set width and height in the template code -

<div class="flex flex-col flex-auto w-full h-full xs:p-2">
    <youtube-player *ngIf="videoId" [videoId]="videoId"></youtube-player>
</div>

and also from the component code. Then it should display automatically to full height.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Zunayed Shahriar
Solution 2 Antonio
Solution 3 atiyar

Related Questions