【问题标题】: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 也使用您上面的代码,但没有结果。
猜你喜欢
  • 2018-02-07
  • 1970-01-01
  • 1970-01-01
  • 2012-11-17
  • 1970-01-01
  • 1970-01-01
  • 2013-03-28
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多