Question

方案

我的网页p1包含iframe。 iframe指向包含来自youtube的嵌入视频的网页p2。

问题

问题在于，如果我在iframe中滚动（通过鼠标）页面，只有当鼠标光标不在youtube embdedded video上时，它才会正常滚动。

但如果鼠标光标位于youtube嵌入式视频上，则iframe中的页面p2会停止滚动，而外部页面p1会开始滚动。

如何避免这种不正常行为？

我希望即使鼠标光标位于youtube嵌入式视频上，iframe内的页面也会继续正常滚动，并且不会松开鼠标滚轮事件。

解决方案失败

我尝试将属性wmode="transparent"添加到youtube嵌入式视频的iframe标记中，但它无法解决问题。

详情

要在iframe中滚动，我正在使用一个替代滚动条的插件。

演示

您可以找到演示here。用Firefox打开它，然后在iframe中滚动鼠标

Answer 1

除了@Kaarel Kont-Kontson建议的解决方案之外，我没有找到解决方案。如果我在视频顶部放置一个div，用户可以播放视频，即使鼠标光标在视频上也可以滚动。

具体来说，以下是显示单个视频的div：

<div style="position:relative; height:200px; width:200px;">
        <iframe style="position:absolute;width:100%;height:100%;z-index:-10;" src="//youtube.com/embed/dooCQdg9-NA"></iframe>
        <div style="height:100%;width:100%;position:absolute;z-index:20;"></div>
    </div>

Answer 2

找到解决方案，观察Facebook代码。

基本上，我没有使用iframe来嵌入YouTube视频，而是使用<embed>标记，如下面的代码：

<embed  wmode="opaque" salign="tl" allowscriptaccess="never" allowfullscreen="true" scale="scale" quality="high" bgcolor="#FFFFFF" name="swf_u_jsonp_2_2b" id="swf_u_jsonp_2_2b" style="display: block;" src="https://www.youtube.com/v/XvLAKrVbCBM?version=3&autohide=1" type="application/x-shockwave-flash">

Firefox：滚动包含嵌入YouTube视频的iframe

2 个答案: