2

设想

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

问题

问题是，如果我（通过鼠标）滚动 iframe 内的页面，只有当鼠标光标不在 youtube 嵌入视频上时，它才会正常滚动。

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

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

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

失败的解决方案

我试图将属性添加wmode="transparent"到 youtube 嵌入式视频的 iframe 标签，但它并没有解决问题。

细节

要在 iframe 内滚动，我使用了一个替换滚动条的插件。

演示

你可以在这里找到演示。用 Firefox 打开它并在 iframe 内用鼠标滚动

4

2 回答 2

1

找到解决方案，观察 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">
于 2013-10-12T01:49:51.557 回答
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>
于 2013-10-11T14:41:11.750 回答