Search code examples
javascriptflashembedded-resourceyoutube-api

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

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.

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!