CODEWITHSUNDEEP
jqueryhtmljquery-plugins
Joetjah
Joetjah

Reputation: 6132

JQuery script not working as expected

I have the following code in my HTML page:

<html>
<head>
 <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
 <script type='text/javascript' src="http://www.tikku.com/scripts/ui/tubeplayer/jQuery.tubeplayer.min.js"></script>
 <script type='text/javascript'>
jQuery("#player").tubeplayer({
    width: 600,
    // the width of the player
    height: 450,
    // the height of the player
    allowFullScreen: "true",
    // true by default, allow user to go full screen
    initialVideo: "rGdViHARBC0",
    // the video that is loaded into the player
    preferredQuality: "default",
    // preferred quality: default, small, medium, large, hd720
    onPlay: function(id) {},
    // after the play method is called
    autoPlay: true,
    onPause: function() {},
    // after the pause method is called
    onStop: function() {},
    // after the player is stopped
    onSeek: function(time) {},
    // after the video has been seeked to a defined point
    onMute: function() {},
    // after the player is muted
    onUnMute: function() {},
    // after the player is unmuted
    onPlayerEnded: function() {
        alert('ENDED')
    },
});
</script>
</head>
<body>
<div id="player"></div>
</body>
</html>

I took it pretty much litteraly from this JSFiddlePage. Even though, my page turns to be completely white. I'd like to see the youtube video using the Tubeplayer API. Why doesn't my site show the video?

Upvotes: 0

Views: 108

Answers (1)

A. Wolff
A. Wolff

Reputation: 74420

You have to wait for DOM ready event. Wrap you code inside:

$(function(){ //short hand for: $(document).ready()
    jQuery("#player").tubeplayer({...});
});

Or put script tag just before body's closing tag.

Upvotes: 3

Related Questions