时间戳

首页 > 解决方案 > 如何在 iframe youtube 上添加变量 src

angular - 如何在 iframe youtube 上添加变量 src

问题描述

以下通过 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>

**由于 media.link 变量无法在 iframe scr 上返回 youtube 链接，此无法显示 youtube 视频 **

标签： angular

解决方案

你可以试试

[src]="media.link"

以避免转义用于插值的角度执行。

另外，请确保您的链接看起来像

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

因为直接 Youtube 链接喜欢

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

不适合嵌入

推荐阅读