Angular：如何将youtube视频动态嵌入到我的模态中？

Question

我正在电影网站上工作，现在正在使用预告片。我从youtube api抓取了3个视频文件，并且已经显示了缩略图并将其id属性设置为youtube.com上视频的ID。

现在，当我点击缩略图标题时，我想打开一个模态窗口，显示我选择的电影的youtube预告片。我这样做是通过抓取视频ID并将其动态放置在下面的 iframe 元素中（嵌入youtube视频需要此元素）。不幸的是，这似乎不起作用。

<iframe width="560" height="315" src="{{link of youtube video gets inserted here after I click on one of the trailer buttons}}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

它告诉我的是一个空模态和下面的错误。有谁知道如何解决这个问题？

  

错误：资源URL上下文中使用的不安全值

所以这就是模态的样子：它显示了一个空模态，而不是我点击的链接的YouTube视频。

HTML文件：在这里我从iframe元素中的组件插入embedLink（url）变量，我需要嵌入Youtube视频

<div class="col-md-8 col-md-offset-2">
<h5>Welcome to MovieMeter! <span *ngIf="isLoggedIn"> You are logged in as {{fullName}}</span></h5>
    <br>
        <h3>Trailers:</h3>
        <hr>
        <ul>
            <li *ngFor="let trailer of trailers">
                <img src="{{trailer.body.items[0].snippet.thumbnails.high.url}}" alt="nope">
                <div id="{{trailer.body.items[0].id.videoId}}" #trailerTitle (click)="openModal(modal, trailerTitle.id)" class="trailerTitle"><h5>{{trailer.movie.title}}</h5></div>
            </li>
        </ul>
    <app-cinema-featured></app-cinema-featured>
</div>


<!-- The Modal -->
<div #modal id="myModal" class="modal">

    <!-- Modal content -->
    <div #modalContent class="modal-content">
        <span (click)="closeModal(modal)" class="close">&times;</span>
        <iframe width="560" height="315" src="{{embedLink}}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>

</div>

组件：在openModal（）方法中，我创建动态youtube网址，然后将其分配给embedlink变量

export class HomeComponent implements OnInit {

    trailers;
    embedLink = null;

    constructor(private modalService:NgbModal, private authService: AuthService, private movieService: MovieService){}

    ngOnInit(){

        // get the thumbnails and links of the three most recent movie trailers via the youtube API
        this.movieService.getTrailers()
            .subscribe(trailers => {
                this.trailers = trailers.result;
                console.log(this.trailers);
            })
    }


    openModal(modal, id){
        this.embedLink = 'https://www.youtube.com/embed/' + id;
        modal.style.display = "block";
    }

    closeModal(modal){
        modal.style.display = "none";
    }
}