Как отобразить карусель видео YouTube в этом приложении фильмов Angular 16?

Я работал над SPA с Angular 16, TypeScript и The Movie Database (TMDB).

Я столкнулся с проблемой при отображении трейлеров фильмов в карусели Bootstrap 5.

В app\services\movie-service.service.ts у меня есть:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from '../../environments/environment';
import { HttpClient } from '@angular/common/http';
import { MovieResponse, Movie } from '../models/Movie'; 
import { Trailer, TrailerResponse } from '../models/Trailer';

@Injectable({
  providedIn: 'root'
})

export class MovieService {

  constructor(private http: HttpClient) { }

  public getMovieTrailers(id: Number): Observable<TrailerResponse>{
    return this.http.get<TrailerResponse>(`${environment.apiUrl}/movie/${id}/videos?api_key=${environment.apiKey}`);
  }

  public getMovieDetails(id: Number): Observable<Movie>{
    return this.http.get<Movie>(`${environment.apiUrl}/movie/${id}?api_key=${environment.apiKey}`);
  }
}

В app\models\Trailer.ts у меня есть:

export interface Trailer {
    id?: string;
    key?: string;
    name?: string;
    site?: string;
}

export interface TrailerResponse {
    results?: Trailer[];
}   

Я создал компонент TrailerCarouselComponent со следующим файлом ts:

import { Component, Input } from '@angular/core';
import { Trailer } from '../../models/Trailer';

@Component({
  selector: 'app-trailer-carousel',
  templateUrl: './trailer-carousel.component.html',
  styleUrls: ['./trailer-carousel.component.scss']
})
export class TrailerCarouselComponent {
  @Input() trailers!: Trailer[];
}

И этот шаблон:

<div id = "trailersCarousel" class = "carousel slide" data-bs-interval = "false">
  <ol *ngIf = "trailers.length > 1" class = "carousel-indicators">
    <li
      *ngFor = "let video of trailers; let i = index"
      data-bs-target = "#trailersCarousel"
      attr.data-slide-to = "{{ i }}"
      class = "{{ i === 0 ? 'active' : '' }}"
    >
      {{ i + 1 }}
    </li>
  </ol>

  <div class = "carousel-inner">
    <div
      *ngFor = "let video of trailers; let i = index"
      
      class = "carousel-item"
      [ngClass] = "{ 'active': i === 0 }"
    >
      <iframe
        class = "embed-responsive-item"
        src = "https://www.youtube.com/embed/{{ video.key }}"
      ></iframe>
    </div>
  </div>
</div>

Я использую указанный выше компонент в компоненте MovieDetailsComponent:

import { Component, Input } from '@angular/core';
import { Movie } from '../../models/Movie';
import { Trailer, TrailerResponse } from '../../models/Trailer';
import { MovieService } from '../../services/movie-service.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-movie-details',
  templateUrl: './movie-details.component.html',
  styleUrls: ['./movie-details.component.scss']
})

export class MovieDetailsComponent {

  constructor(private movieService: MovieService, private activatedRoute: ActivatedRoute) {}

  public movie!: Movie;
  public trailerResponse!: TrailerResponse;
  public trailers: Trailer[] | undefined = [];


  public getMovieTrailers() {
    const movie_id = Number(this.activatedRoute.snapshot.paramMap.get('id'));

    this.movieService.getMovieTrailers(movie_id).subscribe((response) => {
      this.trailerResponse = response;
      this.trailers = this.trailerResponse.results;
      
      if (this.trailers && this.trailers?.length) {
        this.trailers = this.trailers.slice(0, 5);
      } 
    });
  }

  public getMovieDetails() {
    const movie_id = Number(this.activatedRoute.snapshot.paramMap.get('id'));

    this.movieService.getMovieDetails(movie_id).subscribe((response) => {
      this.movie = response;

      // get movie trailers
      this.getMovieTrailers();
    });
  }

  ngOnInit() {
    this.getMovieDetails();
  }
}

Шаблон:

<div *ngIf = "trailers && trailers.length" class = "mb-3">
  <h2 class = "section-title">Trailers</h2>
  <app-trailer-carousel [trailers] = "trailers"></app-trailer-carousel>
</div>

Ошибок компиляции нет, но есть неожиданная (для меня) проблема.

Проблема

Вместо желаемого результата я получаю эту ошибку в браузере:

NG0904: unsafe value used in a resource URL context
...
 at TrailerCarouselComponent_div_3_Template (trailer-carousel.component.html:22:9)
 

Строка, о которой идет речь, src = "https://www.youtube.com/embed/{{ video.key }} из:

<iframe
    class = "embed-responsive-item"
    src = "https://www.youtube.com/embed/{{ video.key }}"
  ></iframe>

Для меня это тем более удивительно, что я уже создал это приложение с помощью Vue3 и Typescript и не столкнулся с проблемой.

ОБНОВЛЯТЬ

Использование трубы, как предложил @Kosta, мне не помогло. Я добавил Stackblitz.

Вопросы

1. Что я делаю не так?
2. Какой самый надежный способ решить эту проблему?