Html 将div放置在iframe的顶部，以防止在iframe上单击注册

观察这张照片：

这是一种尝试，将一个“点击框”放在一个嵌入youtube视频的Iframe之上。 原因是，我希望加载youtube视频缩略图，但我不希望在单击时播放视频。我想再采取一次行动。因此，我将在下面显示的代码中单击框和单击框上的事件侦听器

html:

现在我在

点击框

上使用相对定位，但我觉得这把一切都搞糟了

有更好的办法吗？在我用核弹把整个事情炸开并再试一次之前，我想问问你们。

这是解决办法

<div class="row mt-5 mb-5" id="upcomingvideosrow">
    <div *ngFor="let video of livevideolibraryitems; let i = index" class="col-xl-3 col-xs-12 col-sm-12 col-md-6 col-lg-4">
      <div class="clickbox pb-4" (click)="playselectedvideo(i)">
        <iframe *ngIf="video.is_youtube_link" class="videochoice"  [src]="video.youtube_link"
                frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <div class="row">
          <div class="col-12">
            <h5 style="display: inline-block" class="text-center">{{video.title}}</h5>
          </div>
        </div>
      </div>
    </div>
  </div>

iframe{
  width: 100%;
  height: 100%;
}

.videochoice{
  z-index: 1;
  pointer-events: none;
}



#videoplayercolumn {
  height: 100%;
}

.clickbox{
  position: relative;
  z-index: 2;

{{video.title}
iframe{
宽度：100%；
身高：100%；
}
.视频选择{
z指数：1；
指针事件：无；
}
#视频播放列{
身高：100%；
}
.点击框{
位置：相对位置；
z指数：2；

注意

clickbox

div，以及

.videochoice

类上的

指针事件：none

iframe{
  width: 100%;
  height: 100%;
}



#videoplayercolumn {
  height: 100%;
}

.clickbox{
  border: solid 1px green;
  z-index: 2;
  height: 30vh;
  position: relative;
  bottom: 0vh;


}

@media only screen and (min-width: 300px){

  #videoplayerrow {
    height: 270px;
  }

  .marginshim{
    margin-bottom: 50px;
  }

}

@media only screen and (min-width: 700px){

  #videoplayerrow {
    height: 400px;
  }

}

@media only screen and (min-width: 1000px){

  #videoplayerrow {
    height: 500px;
  }

}

<div class="row mt-5 mb-5" id="upcomingvideosrow">
    <div *ngFor="let video of livevideolibraryitems; let i = index" class="col-xl-3 col-xs-12 col-sm-12 col-md-6 col-lg-4">
      <div class="clickbox pb-4" (click)="playselectedvideo(i)">
        <iframe *ngIf="video.is_youtube_link" class="videochoice"  [src]="video.youtube_link"
                frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <div class="row">
          <div class="col-12">
            <h5 style="display: inline-block" class="text-center">{{video.title}}</h5>
          </div>
        </div>
      </div>
    </div>
  </div>

iframe{
  width: 100%;
  height: 100%;
}

.videochoice{
  z-index: 1;
  pointer-events: none;
}



#videoplayercolumn {
  height: 100%;
}

.clickbox{
  position: relative;
  z-index: 2;