javascript - 如何使用 div 屏蔽 iframe(嵌入 yt)以允许我的 onclick 事件触发而不是播放？

Question

我有三个 iframe，其中嵌入了 yt 视频。我想要的是能够禁用 yt 的控件，因为一旦我单击视频它就会开始播放并且不会触发调整 iframe 宽度和高度大小的 onclick 事件。

以下是我认为可能有帮助的事情: z-index的使用 用 div 屏蔽 iframe 绝对位置 (遗憾的是这对我不起作用)

<div class="main">
<div class="card1" onclick="changeSizeOfVid1()">    

    <iframe id="video1"   width="320px" height="240px" src="https://www.youtube.com/embed/bWPMSSsVdPk">
    </iframe>
</div>
<div class="card2"> 
    <iframe id="video2" onclick="changeSizeOfVid2()"  width="320px" height="240px" src="https://www.youtube.com/embed/0afZj1G0BIE">
    </iframe>
</div>
<div class="card3"> 
    <iframe id="video3" onclick="changeSizeOfVid3()"  width="320px" height="240px" src="https://www.youtube.com/embed/Ukg_U3CnJWI">
    </iframe>
</div>

my jsfiddle

Answer 1

有了使用 z-index 的想法，您就走在了正确的轨道上。但是，您没有在 fiddle 中实现这一点。这是这种覆盖的可能实现的示例

HTML:

<div class="card">
    <div class="overlay">
        IM THE OVERLAY
    </div>
    <iframe class="video" width="320px" height="240px" src="https://www.youtube.com/embed/bWPMSSsVdPk">
    </iframe>
</div>

CSS:

.card {
    display: inline-block;
    position: relative;
    width:320px;
    height:240px;
}

.overlay {
    position: absolute;
    top:0;
    left:0;
    z-index:1;
    width:100%;
    height:100%;
    background:red;
    opacity: .8
}

.video{
    position: absolute;
    top:0;
    left:0;
    z-index:0;
}

JS:

element = document.querySelector('.overlay');
element.addEventListener('click', function(){
    alert("overlay clicked");
})

fiddle :https://jsfiddle.net/2en6L2ak/3/