title: Youtube Api + Fancybox + Autoplay playing without opening video
body: <p>I have a video that is initial hidden inside a div on pageload. Then when I click an image it opens and auto plays.</p>
  
  <p>However, when flash is not enabled on the browser the video plays without being opened. So I can just hear the audio, but no video.</p>
  
  <p>Here is the Youtube Api code I'm using:</p>
  
  <pre><code>&lt;div id="video-home-popup" style="display:none; padding:0px;"&gt;
  &lt;div id="player"&gt;&lt;/div&gt;
  &lt;script type="text/javascript"&gt;
      var tag = document.createElement('script');
      tag.src = "http://www.youtube.com/player_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      var player;
  
      function onYouTubePlayerAPIReady() {
          player = new YT.Player('player', {
              playerVars: {
                  modestbranding: true,
                  theme: 'light',
                  rel: 0,
                  wmode: "opaque",
                  autoplay: '1'
              },
              height: '480',
              width: '640',
              videoId: 'qLFQUdmAkcQ',
              events: {
                  'onReady': onPlayerReady,
                  'onStateChange': onPlayerStateChange
              }
          });
      }
  
      function onPlayerReady(event) {
          /// event.target.playVideo(); 
      }
  
      function onPlayerStateChange(event) {
          if (event.data == YT.PlayerState.PLAYING) {
              _gaq.push(['_trackEvent', 'Videos', 'Play',
              player.getVideoUrl()]);
          }
          if (event.data == YT.PlayerState.PAUSED) {
              _gaq.push(['_trackEvent', 'Videos', 'Paused',
              player.getVideoUrl()]);
          }
          if (event.data == YT.PlayerState.ENDED) {
              _gaq.push(['_trackEvent', 'Videos', 'Watch to End',
              player.getVideoUrl()]);
          }
      }
      // ]]&gt;
  &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Fancybox code:</p>
  
  <pre><code>var vid=jQuery;
  vid.noConflict();
      vid(document).ready(function() {
          vid('.fancyboxvideo').fancybox({
              padding : 0,
              openEffect : 'none',
              closeEffect : 'none',
              prevEffect : 'none',
              nextEffect : 'none',
              autoSize    : false,
              fitToView   : false,
              width       : '640px',
              height      : '480px',
              arrows : false,
              wmode       : 'opaque',
              helpers : {
              media : {},
              buttons : {},
              overlay : {
              css : {
              'background' : 'rgba(0,0,0,0.9)'
                  }
              }
          }
      });
  });
  </code></pre>
  
  <p>Link to open video:</p>
  
  <pre><code>&lt;a class="fancyboxvideo" href="#video-home-popup"&gt;&lt;/a&gt;
  </code></pre>