I wanted to create a component that handles all YouTube embeded video. However passing the src as a variable will not work at all. No matter what I do. Anyone has an idea what's the problem or is it a bug from angular that needs fixing?

I have this in a parent template

   <ng-container *ngFor="let link of youtubeUrlList">
     <app-youtube-card [url]="link"></app-youtube-card>
   </ng-container>

And the child component template is :

 <iframe [src]="safeSource"></iframe>

and in the child component class :

 export class YoutubeCardComponent implements OnInit {

   @Input() url?: string  
   safeSource?: SafeResourceUrl
   constructor(private sanitizer: DomSanitizer) { }
  
   ngOnInit(){
     this.safeSource = this.sanitizer.bypassSecurityTrustResourceUrl(this.url)
   }
 }

and get this error

core.js:6456 ERROR TypeError: t.replace is not a function
    at HTMLIFrameElement.set (<anonymous>:5:5482)
    at EmulatedEncapsulationDomRenderer2.setProperty (platform-browser.js:739)
    at elementPropertyInternal (core.js:10006)
    at Module.ɵɵproperty (core.js:14764)
    at YoutubeCardComponent_ng_container_1_Template (youtube-card.component.html:3)
    at executeTemplate (core.js:9579)
    at refreshView (core.js:9445)
    at refreshEmbeddedViews (core.js:10570)
    at refreshView (core.js:9469)
    at refreshComponent (core.js:10616)

However i don't get that error if I put any of the youTube link directly in the iframe source attribute