DEV Community

stankovic98
stankovic98

Posted on

3 2

How to make width of Angular youtube-player responsive

If you are working with Angular modal for integration of youtube videos, there is a chance that you got stuck just like me on the making size of embedded youtube player full width of the parent. The problem is that the youtube-player component accepts width and heigh only as a number, that is as pixels, which is not good for the responsive design. It is nothing complicated but I will just document it for easier finding in the future.

Let’s start by creating a new component that will have a container for the youtube-player:

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>
Enter fullscreen mode Exit fullscreen mode

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();
  }
}
Enter fullscreen mode Exit fullscreen mode

The code is basically self-explanatory, you have reference on the container of youtube-player, in afterViewInit you set videoHeight and videoWidth, to correspond to the width of the container. We set up an 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>

Thank for reading and if you have any suggestions, please leave a comment.

Heroku

Deliver your unique apps, your own way.

Heroku tackles the toil — patching and upgrading, 24/7 ops and security, build systems, failovers, and more. Stay focused on building great data-driven applications.

Learn More

Top comments (0)

Jetbrains image

Build Secure, Ship Fast

Discover best practices to secure CI/CD without slowing down your pipeline.

Read more

👋 Kindness is contagious

Dive into this insightful write-up, celebrated within the collaborative DEV Community. Developers at any stage are invited to contribute and elevate our shared skills.

A simple "thank you" can boost someone’s spirits—leave your kudos in the comments!

On DEV, exchanging ideas fuels progress and deepens our connections. If this post helped you, a brief note of thanks goes a long way.

Okay