在 ngb-carousel 中嵌入 youtube iframe答案

【问题标题】：embedding youtube iframe in ngb-carousel在 ngb-carousel 中嵌入 youtube iframe
【发布时间】：2019-07-11 21:41:25
【问题描述】：

我正在尝试将 iframe 嵌入到 ngb-carousel 中。轮播显示正常，iframe“标签”不是：


        <ngb-carousel *ngIf="project.images">
          <ng-template class="item" ngbSlide *ngFor="let image of project.images">
            <img class="img-fluid" [src]="image" alt="">
          </ng-template>

          <ng-template class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="project.video"></iframe>
          </ng-template>
        </ngb-carousel>

编辑

stackblitz：https://stackblitz.com/edit/angular-xcmhun

【问题讨论】：

你的 iframe 标签显示的是什么？
它没有显示标签，假设我有 2 个图像标签和视频标签，它只显示 2 个图像标签
嗨！刚试了一下，好像没问题，你需要用更多细节更新你的问题

标签： html angular iframe carousel ng-bootstrap

【解决方案1】：

在上面的示例中，您缺少第二个 ng-template 中的 ngbSlide 指令。我编辑了您的 stackblitz 示例，将该指令添加到该示例中的第三个 ng-template 中，嵌入的视频按预期显示在第三个选项卡上。

显示解决方案的分叉示例：https://angular-ztaxde.stackblitz.io

【讨论】：

【解决方案2】：

是的，请添加 ngbSlide：

        <ngb-carousel>
            <ng-template ngbSlide>
              <iframe width="500" height="315" src="https://www.youtube.com/embed/J2qDRJdTGow" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </ng-template>
          </ngb-carousel>

【讨论】：