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

javascript flash embedded-resource youtube-api

12,634

Solution 1

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:

Edited my /etc/hosts file to include an entry back to my localhost:
```
127.0.0.1   testhost.com
```

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>

Restarted Apache:
```
sudo apachectl restart
```
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!

Solution 2

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.

12,634

Author by

Amy

Assists with the design and implementation of web projects.

Updated on June 04, 2022

Comments

Amy almost 2 years

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.