如何使用Youtube的HTML5 iframe API設置wmode = opaque？

Question

我通過使用JavaScript API嵌入在網站YouTube的實驗HTML5的iframe功能：

YouTube Player API Reference for <ifram> Embeds

我知道的z-index的問題，這帶來，並涉及將修復的wmode =不透明（或的wmode =透明）到iframe網址：

Fixed. My Youtube iframe z-index is ignored and is above a fixed div

如果只是使用JavaScript API，你怎麼設置的wmode不透明：

function onYouTubePlayerAPIReady() { 
    var player; 
    player = new YT.Player('player', { 
     width: 1280, 
     height: 720, 
     videoId: 'u1zgFlCw8Aw', 
     // if I try adding wmode: opaque here, it breaks 
     playerVars: { 
      controls: 0, 
      showinfo: 0 , 
      modestbranding: 1 
      // if I try adding wmode: opaque as a playerVar here, it breaks 
     }, 
     events: { 
      'onReady': onPlayerReady, 
      'onPlaybackQualityChange': onPlayerPlaybackQualityChange 
     } 
    }); 
} 

任何想法？

Answer 1

嗯...

嗯，看起來我很急於發佈這個問題。看起來，在API中設置wmode的正確形式是：

function onYouTubePlayerAPIReady() { 
    var player; 
    player = new YT.Player('player', { 
     width: 1280, 
     height: 720, 
     videoId: 'u1zgFlCw8Aw', 
     playerVars: { 
      controls: 0, 
      showinfo: 0 , 
      modestbranding: 1, 
      wmode: "opaque" 
     }, 
     events: { 
      'onReady': onPlayerReady, 
      'onPlaybackQualityChange': onPlayerPlaybackQualityChange 
     } 
    }); 
} 

希望這可以幫助別人。

Answer 2

據我可以告訴它默認爲opaque。我測試了將wmode更改爲transparent,opaque並將其刪除。當它沒有被指定時，它被自動設置爲opaque。

我不確定這是否總是如此，但現在肯定是。

還記得這隻適用於使用Flash播放器。您可以禁用HTML 5播放器來測試這是'Disable Youtube™ HTML5 Player' plugin的默認設置。然後檢查元素並向下鑽取，直到找到EMBED標記。