如何使用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:

< ifram>的YouTube Player API参考；嵌入

我知道这会带来z-index问题，并且该修复程序涉及在iframe网址中添加wmode = opaque(或wmode = transparent):

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设置为opaque:

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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！