I am embedding a Youtube video on a website using swfObject so I can manipulate it using Youtube Player API. However, I am in the process of rewriting the site in Coffeescript and am stuck on this problem.
Here is the html:
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/swfobject.js">//embedding youtube videos</script>
<script type="text/javascript" src="coffee/test.js"></script>
</head>
<body>
<div id="ytplayer">
<p>You will need Flash 8 or better to view this content.</p>
</div>
</body>
<script type="text/javascript">
var params = { allowScriptAccess: "always" };
swfobject.embedSWF( "http://www.youtube.com/v/yeClJneSNXA&enablejsapi=1&playerapiid=ytplayer", "ytplayer", "425", "365", "8", null, null, params);
</script>
</html>
The following code works:
ytplayer = document.getElementById('ytplayer');
ytplayer.playVideo();
However, the equivalent (I think) coffeescript code DOES NOT:
ytplayer = document.getElementById("ytplayer")
ytplayer.playVideo()
Which compiles to the following JS:
(function() {
var ytplayer;
ytplayer = document.getElementById("ytplayer");
ytplayer.playVideo();
}).call(this);
It gives me the following error in Firebug:
ytplayer.playVideo is not a function
return ytplayer.playVideo();
This is most likely because the YouTube player hasn’t finished loading before you try to play the YouTube video.
Try this:
This puts your code in the onYouTubePlayerReady callback that YouTube uses to let you know the player is ready.
I’m assuming the JS code worked because you ran it inside of Firebug? If so, that would make sense because by the time you enter that command into the console, the YouTube player will most likely be loaded.