如何在iframe youtube上添加变量SRC

Question

通过传递src变量

实现youtube iframe的示例代码如下

<div class="container">
<div class="container-videos">
<div class="row">
<div class="col-lg-6 col-md-9 col-sm-12  col-12 min-width-title-decoration m-t-b" >
<div class="row">
<div class="col-sm-1 col-1 who-we-are-image text-left min-width-title decoration-img">
<img src="assets/img/all/Overline_Mark.svg" alt="">
</div>
<div class="col-sm-11 col-10 who-we-are-title min-width-title-decoration-title">
<span>MEDIA</span>
</div>
</div>
</div>
<div class="col-lg-6 col-md-3"></div>
<ng-container *ngFor="let media of media; let i = index;">
<div class="col-lg-5 col-md-6 col-sm-12 col-12">
<div class="philosophy">
<p>{{media.short_description}} </p>
</div>
</div>
<div class="col-lg-7 col-md-6 col-sm-12 col-12">
<!-- <iframe src="{{media.link}}" width="560" height="315" frameborder="0" allowfullscreen></iframe> -->
<iframe width="560" height="315" src='{{media.link}}' frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</ng-container>
</div>
</div>
</div>

**这个不能显示YouTube视频由于，媒体。链接变量不能返回iframe SCR上的YouTube链接**

Answer 1

你应该使用属性绑定的概念。

试试这个

<iframe width="420" height="345" [src]="media.link">
</iframe>

Answer 2

你可以试试

[src]="media.link"

来避免转义angular执行的插值值。

同时，确保你的链接看起来像

`https://www.youtube.com/embed/${videoId}` 

因为直接的Youtube链接像

`https://www.youtube.com/watch?v=${videoId}` 

不适合嵌入