title: How do you set wmode=opaque using Youtube's HTML5 iframe API?
body: <p>I'm embedding Youtube's experimental HTML5 iframe capabilities in a website through use of the javascript API:</p>
  
  <p><a href="http://code.google.com/apis/youtube/iframe_api_reference.html" rel="noreferrer">YouTube Player API Reference for &lt;ifram&gt; Embeds</a></p>
  
  <p>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:</p>
  
  <p><a href="http://www.scorchsoft.com/news/youtube-z-index-embed-iframe-fix" rel="noreferrer">Fixed. My Youtube iframe z-index is ignored and is above a fixed div</a></p>
  
  <p>When just using the javascript API, how do you set wmode to opaque:</p>
  
  <pre><code>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
          }
      });
   }
  </code></pre>
  
  <p>Any ideas?</p>