Menu
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.
562
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!
193
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.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
