How do you set wmode=opaque using Youtube's HTML5 iframe API?

Question

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

YouTube Player API Reference for <ifram> Embeds

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:

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

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

Any ideas?

AdamJonR AdamJonR · Accepted Answer · 2011-07-26T07:17:11

Hmmmm...

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.

How do you set wmode=opaque using Youtube's HTML5 iframe API?

2 Answers