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

Posted 2023-02-24

【中文标题】如何使用 Youtube 的 HTML5 iframe API 设置 wmode=opaque？

【英文标题】：How do you set wmode=opaque using Youtube's HTML5 iframe API?

【发布时间】：2011-10-13 04:09:36

【问题描述】：

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

YouTube Player API Reference for <ifram> Embeds

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

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
        
    );
 

有什么想法吗？

【参考方案1】：

据我所知，默认为opaque。我测试了将wmode 更改为transparent、opaque 并将其删除。如果未指定，它会自动设置为opaque。

我不确定是不是一直都是这样，但现在肯定是这样。

还请记住，这仅适用于使用 Flash 播放器时。您可以禁用 HTML 5 播放器来测试它，这是使用 'Disable Youtube™ HTML5 Player' plugin 的默认设置。然后只需检查元素并向下钻取，直到找到 EMBED 标记。

【参考方案2】：

嗯嗯……

好吧，看来我发布这个问题很仓促。在 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
        
    );
 

希望这对其他人有所帮助。