火狐：包含嵌入YouTube视频

场景滚动的iframe火狐：包含嵌入YouTube视频

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

问题

的问题是，如果我滚动（由小鼠）的页面的iframe内，它滚动通常只如果鼠标光标不在一个YouTube视频embdedded。

但是，如果鼠标指针位于YouTube嵌入式视频上，iframe中的页面p2停止滚动，而外部页面p1开始滚动。

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

我认为，即使鼠标指针位于YouTube嵌入视频上，iframe内的页面也会继续正常滚动，并且不会松开鼠标滚轮事件。

未能解决

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

详细

要在iframe内的滚动我使用substitues滚动条插件。

演示

你可以找到演示here。用Firefox打开并在iframe中滚动鼠标

来源

2013-10-11 Giovanni Bitliner

嗯，这是闪存你 - 心爱的可用性杀手！ 'wmode'是flash对象本身的参数，不适用于iframe。 – CBroe

我还没试过，但不能在视频顶部添加一个透明的div来使事情滚动。这可能会失去点击视频播放按钮的可能性。 – Kaarel

我添加了一个重现问题的重击器 –

实测值的溶液中，得到了观察的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-12 01:49:51

除了@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-11 14:41:11

该解决方案的一个问题是，它适用于Firefox，但在Chrome中我无法点击播放播放视频。 –

火狐：包含嵌入YouTube视频

回答

相关问题