Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

youtube

api

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?

like image 547
AdamJonR Avatar asked Jul 26 '11 06:07

AdamJonR


People also ask

What is iFrame API?

Developers can use the iFrame API to programmatically create and interact with an Embed or with multiple Embeds in the same web app. The iFrame API includes methods that you can use to start playback, change the content rendering in an Embed, or stop playback.

How do I unmute an iFrame video?

Until and unless you have allow="autoplay;" in your iframe tag you wont be able to unmute the video. Add this attribute and further unMute function will work. Show activity on this post. Usually, you can just click the mute button to unmute it.


1 Answers

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.

like image 123
AdamJonR Avatar answered Sep 28 '22 16:09

AdamJonR