iframe 视频控件不可点击？答案

【问题标题】：Iframe video controls not clickable?iframe 视频控件不可点击？
【发布时间】：2020-06-01 19:56:15
【问题描述】：

我正在使用该示例：https://codepen.io/cyborgspaceviking/pen/BdWagp#code-area 但除了使用 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>

这是我的codepen版本链接：https://codepen.io/affan-sheikh/pen/MWKggOe

【问题讨论】：

从您发布的预览中，看起来 img 在 iframe 上方。您确定您实际点击的是 iframe 而不是上面的图片？

标签： javascript html css iframe

【解决方案1】：

从您发布的预览中，看起来 img 位于 iframe 上方。尝试将pointer-events:none; 添加到上面的每个元素，使其不可点击。

Check here for more details

【讨论】：

我需要视频控件可以点击。
打开开发工具，检查上面有哪些元素，并在每个元素的css样式中添加pointer-events:none;。
我试过了，但没有结果。但是当我将 iframe 及其父 div 控件之外的容器代码移动时。
你能发布你的代码的codepen吗？我无法重现它。
当然..这是我的代码笔链接：codepen.io/affan-sheikh/pen/MWKggOe

【解决方案2】：

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

.gif-tv .viewport .pixels, .gif-tv .viewport .meta-left, .gif-tv .viewport .meta-right { 指针事件：无； }

【讨论】：

您能否补充解释为什么这会起作用？
您需要删除 resp-container 包装器或对其应用 .video 样式。
.resp-container { z-index: 0; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
我删除 .resp-container div 并将我的视频类应用到 iframe 也使用您上面的代码，但没有结果。