【问题标题】: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>
    

    【讨论】:

      猜你喜欢
      • 2020-05-06
      • 2016-07-25
      • 1970-01-01
      • 2012-08-22
      • 2011-12-13
      • 2013-02-16
      • 2015-02-27
      • 2011-06-16
      • 1970-01-01
      相关资源
      最近更新 更多