Javascript Iframe视频控件不可单击？

我用这个例子： 但除了使用gif文件，我还使用视频并将其加载到iframe中。 但视频控件不可单击

这是我用img标记替换html的过程：

  <div class="resp-container">
            <iframe class="resp-iframe video" id="gif_tv_video" scrolling="no" frameborder="0" allowfullscreen="1"
              allow="autoplay; encrypted-media" src=""></iframe>
          </div>

---

这是我的代码笔版本链接：

从您发布的预览中，看起来img位于iframe之上。 尝试添加

指针事件：无到上面的每个元素，使其不可单击

似乎重叠，请尝试以下操作：

.gif-tv .viewport .pixels, 
    .gif-tv .viewport .meta-left, 
    .gif-tv .viewport .meta-right {
        pointer-events: none;
    }
.gif tv.viewport.pixels，
.gif tv.viewport.meta左、，
.gif tv.viewport.meta右键{
指针事件：无；
}
从您发布的预览来看，img似乎位于iframe之上。您确定您实际上是在单击iframe而不是上面的图像吗？您是否也可以添加解释，说明为什么会这样做？您需要删除
resp container
包装器或对其应用
.video
样式。
.resp container>{z-index:0；位置：绝对；顶部：50%；左侧：50%；-webkit转换：转换（-50%，-50%）；转换：转换（-50%，-50%）；}
i remove.resp container div并将我的视频类应用于iframe也会使用上面的代码，但没有结果。我需要视频控件可以单击。打开开发工具，检查上面的元素，并将
指针事件：none；
添加到每个元素的css样式中。我尝试了它，但没有结果。但是当我将iframe及其容器代码移出时，我将其移除de其父div控件正在工作。您可以发布代码笔吗？我无法复制它。当然..这是我的代码笔链接：