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

18,558

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.

Share:
18,558

Related videos on Youtube

AdamJonR
Author by

AdamJonR

[some witty expression of my uniqueness here]

Updated on June 04, 2022

Comments

  • AdamJonR
    AdamJonR almost 2 years

    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?