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

问题描述

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

I'm embedding Youtube's experimental HTML5 iframe capabilities in a website through use of the javascript API:

的 YouTube 播放器 API 参考嵌入

我知道这带来的 z-index 问题，以及涉及将 wmode=opaque(或 wmode=transparent)添加到 iframe url 的修复:

I'm aware of the z-index issues this brings about, and the fix that involves adding wmode=opaque (or wmode=transparent) to the iframe url:

已修复.我的 Youtube iframe z-index 被忽略并且位于固定 div 之上

当只使用 javascript API 时，如何将 wmode 设置为不透明:

When just using the javascript API, how do you set wmode to 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
        }
    });
 }

有什么想法吗?

推荐答案

嗯...

好吧，看来我发布问题是仓促的.似乎在 API 中设置 wmode 的正确形式是:

Well, it appears I was hasty in posting the question. It appears that the correct form for setting wmode within the API is:

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

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

Hopefully this helps someone else.

这篇关于如何使用 Youtube 的 HTML5 iframe API 设置 wmode=opaque?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！