如何解决将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 mb-5 pb-3">
<iframe *ngIf="video.is_youtube_link" [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 mb-5">{{video.title}}</h5>
</div>
<div (click)="playselectedvideo(i)" class="col-12 clickbox">
</div>
</div>
</div>
</div>
css类为clickbox
的div是旨在覆盖iframe
的单击框
现在单击框在那里,周围有一个绿色边框。但是,在我上传的屏幕快照中,您看不到它,因为它远在下方。而且iframe
的尺寸不是我要绘制的正方形。
检查CSS:
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;
}
}
现在我在clickbox
上使用相对定位,但是我觉得这一切都搞砸了。
有更好的方法吗?想在我把整个事情都推后再试一次的时候问你们。
解决方法
解决了!
<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;
注意clickbox
div和pointer-events: none
类的.videochoice
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。