Question

I’m using jQuery to try to show a hidden YouTube player, and then start playing the video once its containing div is shown.

The problem is that this only works on Chrome, not in IE or FireFox. In IE, I see the error: JSON is undefined.

What can I do to make this work right in all three browsers?

Here’s the code I have so far:

  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();
                    }
                });
            });
  }

Answer 1

My guess is that it’s lucky accident that it works on Chrome in the first place. For example a common problem is not waiting for the call to “onYouTubePlayerReady”. At least for debugging purposes you’ll also want to do something like:

$('div#target_wrap img, div#main_vid').click(function(event){
    event.preventDefault();
    $('#player').slideToggle(function(){
        if (player.getPlayerState) {
            alert("player state: " + player.getPlayerState());
            if ($('#player').is(":visible")) {
                player.playVideo();
            } else {
                player.stopVideo();
            }
        } else {
            alert("Player not ready yet.");
        }

    });
});

If you can share more of your code we might have a better answer.