title: How to make YouTube embedded player start video on certain event
body: <p>I'm using jQuery to try to show a hidden YouTube player, and then start playing the video once its containing div is shown.</p>
  
  <p>The problem is that this only works on Chrome, not in IE or FireFox.  In IE, I see the error:  JSON is undefined.</p>
  
  <p>What can I do to make this work right in all three browsers?</p>
  
  <p>Here's the code I have so far:</p>
  
  <pre><code>  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', {
        height: '390',
        width: '640',
        videoId: 'r3lPq7qY3TU',
        events: {
          'onReady': onPlayerReady
        }
      });
  
              $('div#target_wrap img, div#main_vid').click(function(event){
                  event.preventDefault();
                  var p = $('#player');
  
                  p.slideToggle(function(){
                      if (p.is(":visible")) {
                          player.playVideo();
                      } else {
                          player.stopVideo();
                      }
                  });
              });
    }
  </code></pre>