Can't control Youtube embed even with document.getElementById('xyz').playVideo() - not a function?

StackOverflow https://stackoverflow.com/questions/2217543

Question

OK, I'm stuck and I don't know what's wrong even after following Google's docs and reading suggestions here on Stackoverflow. Why can't I control Youtube embeds in my web page?

If I create an HTML file with the <body> being:

<object id="o1" width="480" height="295">
  <param name="movie" 
    value="http://www.youtube.com/v/qCTLCNmnlKU&hl=en_US&fs=1&enablejsapi=1&">
  </param>
  <param name="allowFullScreen" value="true"></param>
  <param name="allowscriptaccess" value="always"></param>
  <embed id="e1" 
    src="http://www.youtube.com/v/qCTLCNmnlKU&hl=en_US&fs=1&enablejsapi=1&" 
    type="application/x-shockwave-flash" 
    allowscriptaccess="always" allowfullscreen="true" width="480" height="295">
  </embed>
</object>

Even when I attempt to do:

// I get an object. Yay.

document.getElementById('e1');

// This generates "...playVideo is not a function"

document.getElementById('e1').playVideo();

Help! What am I doing wrong? Thanks.

Was it helpful?

Solution

OK, so here's the answer found in one tiny line of text on the API page: http://code.google.com/apis/youtube/js_api_reference.html

"Note: To test any of these calls, you must have your file running on a webserver, as the Flash player restricts calls between local files and the internet."

So to allow me to continue to develop on my Mac laptop I did the following:

  1. Edited my /etc/hosts file to include an entry back to my localhost:

    127.0.0.1   testhost.com

  2. Edited my /etc/apache2/httpd.conf file to add a virtual host entry pointing back to my development directory:

    <VirtualHost *:80>
    ServerName testhost.com
    DocumentRoot /Users/amy/flashproj
    <Directory /Users/amy/flashproj>
        AllowOverride all
        Options MultiViews Indexes FollowSymLinks
        Allow from All
    </Directory>
</VirtualHost>

  3. Restarted Apache:

    sudo apachectl restart

  4. Browsed back to my own localhost via my new virtual server:

    http://testhost.com

Voila. That totally works now. I can query the page for the player:

document.getElementById('e1');                // OK
document.getElementById('e1').playVideo();    // OK!

Whew! No onYouTubePlayerReady() required either!

OTHER TIPS

Youtube player hasn't yet been loaded at the time you're trying to use it. There is a special callback function that will be fired automatically as soon as it is loaded.

Your HTML pages that display the chromeless player must implement a callback function named onYouTubePlayerReady. The API will call this function when the player is fully loaded and the API is ready to receive calls.

by YouTube JavaScript Player API Reference.

Therefore you can rewrite your code in the following manner:

<script type="text/javascript">
function onYouTubePlayerReady(playerId) {
    var ytplayer = document.getElementById('e1');
    ytplayer.playVideo();
}
</script>

You can also mind passing playerapiid while embedding the player if there are plenty of them to distinguish in onYouTubePlayerReady handler.

What happens if you use the id "o1" instead of "e1"?

OK well on this page: http://code.google.com/apis/youtube/js_api_reference.html it seems to me that the "swfobject" library needs to be included in order for that API to be available. I'll try it.

[edit] OK here's what I've got:

<html>
  <head>
    <script src='http://code.jquery.com/jquery-1.4.1.js'></script>
    <script src='http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'></script>
    <script>
      window['onYouTubePlayerReady'] = function onYouTubePlayerReady(playerId) {
        player = document.getElementById("zebra");
        player.playVideo();
      };
      $(function() {
         swfobject.embedSWF(
         "http://www.youtube.com/v/qCTLCNmnlKU?hl=en_US&fs=1&enablejsapi=1&playerapiid=ytplayer", 
          "foo",
          "480", "295",
          "8",
          null, null,
          { allowScriptAccess: 'always' },
          { id: 'zebra' }
        );
      });
    </script>
  </head>
  <body>
    <div id='foo'>Foo</div>
  </body>
</html>

This works, but oddly enough it only works when I serve it from a real web server. If I put that in a local file and load it up in the browser, it doesn't work. I don't know why but then I'm absolutely not a Flash expert, or a YouTube expert.

See http://gutfullofbeer.net/youtube.html (same as what's typed in above)

I was stuck with this problem for two days.. every problem related to youtube player variable was related to run it locally. After faking a address via windows/hosts it works perfectly.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top