网页中iFrame被透明PNG遮挡无法点击的解决方法求助

问题核心是绝对定位的.videoFrame图片覆盖在iframe之上，拦截了所有鼠标交互事件，导致下方的iframe无法响应点击操作。

直接给相框图片添加pointer-events: none;CSS属性即可解决——该属性会让元素忽略所有鼠标事件，点击会直接穿透到下方的iframe：

.Video_Block .videoFrame{
      position: absolute;
      width: 90%;
      height: 90%;
      left: 10px;
      top: 10px;
      pointer-events: none; /* 添加这一行实现点击穿透 */
 }

另外，你原代码中iframe的CSS末尾存在一段多余的图片标记[![Photo frame on top of the youtube-iFrame][1]][1]，需要删除，修正后的iframe样式如下：

.Video_Block iframe {
      background-color: black;
      position: absolute;
      left: 35px;
      top: 40px;
      height: 175px;
      width: 195px;
      object-fit: contain;
      transition: border-radius 0.5s;
}

如果后续需要相框的特定区域具备交互性，可以通过调整z-index属性，将iframe的层级设为高于相框（比如给iframe添加z-index: 1;），但对于纯装饰性的透明相框，pointer-events: none;是最简洁高效的方案。

内容的提问来源于stack exchange，提问作者Lincoln Simms