Question

我通过使用javascript API在网站中嵌入了Youtube的实验性HTML5 iframe功能：

YouTube Player API Reference for <ifram> Embeds

我知道这带来的z-index问题，以及涉及将wmode = opaque（或wmode = transparent）添加到iframe网址的修复：

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

当只使用javascript API时，如何将wmode设置为opaque：

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

... Hmmmm

好吧，我似乎急于发布这个问题。似乎在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标记。

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

2 个答案: