loadByvideoId is not a function

Question

The below fiddle when opened in chrome,fox and iE its working fine

'http://jsfiddle.net/wmdPN/'

When i copy the code from the fiddle and use it in my machine,its not working i m getting error as o.loadVideoById is not a function. why is that so ? what am i doing wrong?

The code i used is as follows( the same as fiddle)

 <html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js">               </script>

<a name="ytplayer"></a>
<div id="ytplayer_div1">You need Flash player 8+ and JavaScript
    enabled to view this video.</div>
<div id="ytplayer_div2"></div>
<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/swfobject/2/swfobject.js"></script>
<script type="text/javascript">

    var ytplayer_playlist = [];
    var ytplayer_playitem = 0;

    function ytplayer_render_player() {
        if (/\d+/.test(window.location.hash)) {
            ytplayer_playitem = parseInt(/\d+/.exec(window.location.hash)) - 1;
        }
        swfobject.embedSWF('http://www.youtube.com/v/'
                + ytplayer_playlist[ytplayer_playitem]
                + '&enablejsapi=1&rel=0&fs=1'
                + (/\d+/.test(window.location.hash) ? '&autoplay=1' : ''),
                'ytplayer_div1', '425', '344', '8', null, null, {
                    allowScriptAccess : 'always',
                    allowFullScreen : 'true'
                }, {
                    id : 'ytplayer_object'
                });
    }

    function ytplayer_render_playlist() {
        for ( var i = 0; i < ytplayer_playlist.length; i++) {
            var img = document.createElement("img");
            img.src = "http://img.youtube.com/vi/" + ytplayer_playlist[i]
                    + "/default.jpg";
            var a = document.createElement("a");
            a.href = "#ytplayer";
            //
            // Thanks to some nice people who answered this question:
            // http://stackoverflow.com/questions/1552941/variables-in-anonymous-functions-can-someone-explain-the-following
            //
            a.onclick = (

            function(j) {
                return function() {
                    ytplayer_playitem = j;
                    ytplayer_playlazy(1000);
                };
            })(i);
            a.appendChild(img);
            document.getElementById("ytplayer_div2").appendChild(a);
        }
    }

    function ytplayer_playlazy(delay) {
        //
        // Thanks to the anonymous person posted this tip:
        // http://www.tipstrs.com/tip/1084/Static-variables-in-Javascript
        //
        if (typeof ytplayer_playlazy.timeoutid != 'undefined') {
            window.clearTimeout(ytplayer_playlazy.timeoutid);
        }
        ytplayer_playlazy.timeoutid = window.setTimeout(ytplayer_play,
                delay);
    }

    function ytplayer_play() {
        var o = document.getElementById('ytplayer_object');
        if (o) {
            o.loadVideoById(ytplayer_playlist[ytplayer_playitem]);
        }
    }


     function onYouTubePlayerReady(playerid) {
        var o = document.getElementById('ytplayer_object');
        if (o) {
    o.addEventListener("onStateChange",        "ytplayer_statechange");
            o.addEventListener("onError", "ytplayer_error");
        }
    }
    //
    //State Change Handler
    //* Sets up the video index variable
    //* Calls the lazy play function
    //

    function ytplayer_statechange(state) {
        if (state == 0) {
            ytplayer_playitem += 1;
            ytplayer_playitem %= ytplayer_playlist.length;
            ytplayer_playlazy(5000);
        }
    }
    //
    //Error Handler
    //* Sets up the video index variable
    //* Calls the lazy play function
    //

    function ytplayer_error(error) {
        if (error) {
            ytplayer_playitem += 1;
            ytplayer_playitem %= ytplayer_playlist.length;
            ytplayer_playlazy(5000);
        }
    }
    //
    //Add items to the playlist one-by-one
    //
    ytplayer_playlist.push('tGvHNNOLnCk');
    ytplayer_playlist.push('_-8IufkbuD0');
    ytplayer_playlist.push('wvsboPUjrGc');
    ytplayer_playlist.push('8To-6VIJZRE');
    ytplayer_playlist.push('8pdkEJ0nFBg');
    //
    //These lines have been moved to the bottom
    //
    ytplayer_render_player();
    ytplayer_render_playlist();
</script>

</body>

</html>

score 1 · Answer 1 · answered Dec 24 '12 at 00:41

In the first place it is loadVideoById instead of loadByvideoId. But i think that is a typo.

Had the same issue here but with my own code. Problem was that when the iframe is not visible for some reason the iframe does not load the content and the object will not be extended by the API (the reason why loadVideoById is not there). Also the function window.onPlayerReady will never be called when not visible. That could be the problem in your case too. Be sure that iframe is really visible on the page.

The 'trick' i use is to use some CSS to load the iframe in a visible area and after it is loaded i change the classname so it will be placed in the right location/position:

CSS:

#player {position:relative; width:200px; height:200px; ....... }
#player.loading {position:fixed; top:0; left:0; width:1px;height:1px; overflow:hidden; }

in the window.onPlayerReady callback i remove the 'loading' class from the object, for example (with jQuery):

$j('#player').removeClass('loading').prop({width:'',height:''}).css({width:'',height:''});

Also i remove the width and height added by the API to the object to be able to style it width css.

Notice: I have create the YT.Player class with a width and height of 1px.

That's it.

loadByvideoId is not a function

1 Answers1