Question

I don’t know if i’m being stupid and missing something obvious but:

I have a page that has this following script:

$(document).ready(function() {
    $('.fsBtn').click(function(e) {
        $("#fullscreenVideo").show();
        player.stopVideo();
        playerFS.playVideo();
    });
});

In every browser bar IE8 this will load ok. However in IE8 the debugger will come up with:
Object doesn't support this property or method Line 144 which is the playerFS.playVideo()

I checked that it has been declared -it has. and the odd thing is, if i go into IE’s script debugger and run playerFS.playVideo() it will be accepted by IE.

Why would this script not execute in code, yet allow me to execute it fine in debug?

Here are the steps I’ve taken so far:
– Places the script in a doc ready to ensure that its ok.
– Place the script in the page instead of external JS file.
– IE Debug mode to run script manually.

Any help would be appreciated, this really does have me stumped. Can provide more info if necessary.

Edit:
Player and playerFS are both defined with this:

function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
        height: '360',
        width: '640',
        videoId: V_ID,
        playerVars: playerParams,
        events: {
            // 'onReady': onPlayerReady,
            // 'onStateChange': onPlayerStateChange
        }
    });
    //exact Same code again but for playerFS instead of player
}

With the parts where it says “player” being “playerFS” in another .

HTML Page and JS for player: http://pastebin.com/ZbBwKg9a

Answer 1

The youtube API struggles to be embedd in a hidden div using the JSAPI.

Try to add in a piece of code that initialises the video before hiding it to ensure that it’s been created properly.