的Youtube IFRAME的wmode問題

133

使用JavaScript與jQuery，我加入了一個iframe與YouTube網址顯示的網站但是嵌入代碼，獲取從YouTube犯規的iframe中加載的視頻具有的wmode =「不透明」，因此， youtube視頻下方會顯示頁面上的模式框。的Youtube IFRAME的wmode問題

任何想法如何解決這個問題？

來源

2010-10-29 snakeyyy

這仍然是一個問題？我之前使用過此解決方案，但無法在最新的Chrome/Firefox/IE中重現原始問題。 – marcovtwout 2013-11-18 17:03:40

237

嘗試增加?wmode=opaque到URL或&wmode=opaque，如果已經有一個參數。

如果它不起作用，請嘗試這個，&wmode=transparent它也可以在IE瀏覽器中工作。

來源

2010-11-18 03:06:21 Shabith

不錯！在Firefox和鉻上工作，但由於某種原因不能在IE瀏覽器上工作...任何想法？ – danfromisrael 2010-11-24 13:10:09

+31

嘗試使用& wmode =透明，而不是 – Shabith 2010-11-25 07:23:37

不工作...我已經嘗試玩z-index失敗... – danfromisrael 2010-11-25 12:03:07

嘗試將?wmode=transparent添加到URL的末尾。爲我工作。

來源

2010-12-06 14:00:40 Casper

在我看來，「透明」應該是首選。 – Foxinni 2012-10-17 09:19:14

添加?wmode=opaque的URL似乎解決了這個問題對我來說，雖然我沒有在IE中測試它。

對於那些你有與先前提出的解決方案的煩惱，請注意，如果你已經到URL提供其他參數的inital符號纔有效。第一個參數必須有一個初始問號：http://www.example.com?first=foo&second=bar

來源

2011-02-09 00:45:19

無論我試圖展示的視頻如何，我最初都會看到一個黑色矩形。事實證明，測試機器沒有安裝閃光燈，而且安裝閃光燈的對話偏移得太多了！ – Zeb 2011-09-16 12:44:13

將&wmode=transparent添加到網址，然後完成測試。

我使用的技術在我自己的WordPress插件YouTube shortcode

檢查它的源代碼，如果你遇到的任何問題。

來源

2011-02-28 11:49:32

添加& wmode =透明URL後透明解決所有瀏覽器的問題。感謝Tubal先生，幹得好:) – 2011-03-13 14:13:30

&wmode=opaque並沒有爲我（鉻10），但&wmode=transparent清除問題直到工作。

來源

2011-03-29 17:25:41 imjared

如果您使用的是新的異步API，你將需要添加的參數，像這樣：

<!-- YOUTUBE --> 
// 2. This code loads the IFrame Player API code asynchronously. 
var tag = document.createElement('script'); 
tag.src = "http://www.youtube.com/player_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

// 3. This function creates an <iframe> (and YouTube player) 
// after the API code downloads. 
var player; 
var initialVideo = 'ApkM4t9L5jE'; // YOUR YOUTUBE VIDEO ID 
function onYouTubePlayerAPIReady() { 
    console.log("onYouTubePlayerAPIReady" + initialVideo); 
    player = new YT.Player('player', { 
     height: '381', 
     width: '681', 
     wmode: 'transparent', // SECRET SAUCE HERE 
     videoId: initialVideo,  
     playerVars: { 'autoplay': 1, 'rel': 0, 'wmode':'transparent' }, 
     events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
     } 
    }); 
}

這是基於谷歌文檔和示例在這裏： http://code.google.com/apis/youtube/iframe_api_reference.html

來源

2012-02-21 23:10:19

請注意，這也需要playerVars中的wmode。當它剛好在YT.Player下時，它只能用於HTML5播放器。向playerVars添加wmode還會將該參數發送給Flash對象，該對象具有自己的z順序問題。請參閱：https://groups.google.com/forum/?fromgroups#!topic/youtube-api-gdata/OQRG5rTKBFQ 我會相應地編輯您的答案。 – 2012-03-21 04:18:28

我試過了，它沒有工作。我也沒有在YouTude文檔中找到任何有關wmode的參考。 – sboisse 2013-10-16 20:37:07

自我第一次發佈以來，鏈接發生了變化，設置wmode的方法也一樣。您現在可以通過playerVars設置任何閃光燈參數或者設置玩家參數。我已經更新了上面的例子。 – 2013-10-17 19:10:18

只是一個提示！ - 確保您在要嵌入視頻的元素上使用z-index。我添加了wmode查詢字符串，它仍然沒有工作......直到我提高了其他元素的z-index。 :)

來源

2012-10-17 09:03:20

我知道這是一個老問題，但在這個問題上，所以我加入了新的答案上方的搜索仍然出現，以幫助那些尋找一個針對IE：

添加&wmode=opaque到該URL的結束並不在IE 10工作...

然而，增加?wmode=opaque的伎倆！

發現這個解決方案在這裏：http://alamoxie.com/blog/web-design/stop-iframes-covering-site-elements

來源

2013-08-16 20:52:31

'＆'和'？'都是正確的，具體取決於它們的使用順序以及URL中包含的其他設置。顯然，如果這是第一個（或唯一）設置，則使用'？'，否則使用'＆'。 – Alex 2013-09-11 13:50:58

是的，但IE有特殊需求。試試看看哪些在IE 10中有效，哪些沒有。我還沒有在IE 11中試過這個。 – 2013-12-19 21:45:26

最近我看到，有時flash播放器不能識別&wmode=opaque，istead你應該通過&WMode=opaque太（注意大寫）。

來源

2015-10-12 17:17:34

的Youtube IFRAME的wmode問題

回答

相關問題