火狐：包含嵌入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視頻

回答

相關問題