angular youtube autoplay

/* eslint-disable @nx/enforce-module-boundaries */
/* eslint-disable @angular-eslint/component-class-suffix */
import { CommonModule } from '@angular/common';
import { Component, computed, effect, inject } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { DomSanitizer } from '@angular/platform-browser';
import { VideoService } from '@api/services';
import { ContainerComponent } from 'apps/client/src/app/components/container/container.component';
import { map, timeout } from 'rxjs';
import { YOUTUBE_PLAYER_CONFIG, YouTubePlayer } from '@angular/youtube-player';

export const getVideoId = (path: string | undefined): string => {
  if (!path) return '';

  const str = path.split('/');
  const id = str[str.length - 1];

  if (id.substring(0, 8) === 'watch?v=') {
    console.log(id);
    return id.substring(8).split('&')[0];
  } else {
    return id;
  }
};

@Component({
  selector: 'app-section3',
  standalone: true,
  imports: [CommonModule, ContainerComponent, YouTubePlayer],
  templateUrl: './section3.page.html',
  styleUrl: './section3.page.scss',
})
export class Section3Page {
  videoService = inject(VideoService);
  domSanitizer = inject(DomSanitizer);

  video = toSignal(
    this.videoService.videoControllerFindFirst().pipe(
      timeout(5000),
      map((item) => {
        return {
          ...item,
          url: this.domSanitizer.bypassSecurityTrustResourceUrl(
            `${item?.url}?autoplay=1&mute=1`
          ),
          mentorUrl: this.domSanitizer.bypassSecurityTrustResourceUrl(
            `${item?.mentorUrl}?autoplay=1&mute=1`
          ),
          videoId: getVideoId(item?.link),
        };
      })
    )
  );

  playerVars: YT.PlayerVars = {
    autoplay: 1,
    mute: 1,
    loop: 1,
  };


  moveToLink(ev: any) {
    ev.stopPropagation();
    if (!this.video()?.link) return;
    window.open(this.video()?.link, '_blank');
  }
}

  <youtube-player
          class="lg:hidden md:rounded-tr-[32px] md:rounded-br-[32px] md:rounded-bl-none rounded-3xl md:rounded-tl-none overflow-hidden"
          height="184"
          width="328"
          [videoId]="id"
          [playerVars]="playerVars"
        ></youtube-player>