youtube iframe events

Question

I try to catch the events of a youtube iframe: http://lab.joergpfeiffer.de/videofull/youtube.php

So I call first the api

<script type='text/javascript' src='http://www.youtube.com/player_api'></script>

I set the iframe

<iframe id="ytfullplayer" type="text/html" width="640" height="390" src="http://www.youtube.com/p/B93C3D017CB2D65A?enablejsapi=1&origin=lab.domain.de" frameborder="0" ></iframe>

and try to set the events later in

var ytfullplayer;
    function onYouTubePlayerAPIReady() {
        console.log('onYouTubePlayerAPIReady');
        ytfullplayer = new YT.Player('ytfullplayer', {
            events: {
              'onReady': testfunc,
              'onPlaybackQualityChange': testfunc,
              'onStateChange': testfunc,
              'onError': testfunc
            }
        });

    }
    function testfunc(){ alert('hello'); }

Whatever I do, there are no events fired. And I read the iframe api 10 times. it should work actually.

Any idea?

Answer 1

Execute these routines before onYouTubePlayerAPIReady()

// This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

if stil have confusion then visit http://code.google.com/apis/youtube/iframe_api_reference.html

Answer 2

I did the following.

Started with the example code found at https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

I then replaced:

<div id="player"></div>

with

<iframe id="player" type="text/html" width="640" height="390"
  src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com"
  frameborder="0">
</iframe>

(iframe markup found at the same URL)

Then I got rid of the origin parameter in the above - that seemed to make things work. BTW, I found that step 2 can be replaced by markup:

<script src="https://www.youtube.com/iframe_api"></script>

Answer 3

Adeel's answer should fix your problem.

Google recommend you load the player API script asynchronously, ie, letting the rest of your page load while the script is simultaneously loading.

Because you're placing the script tag in your markup early on, the rest of the page isn't executed until that script has been loaded. So when the call is made to onYouTubePlayerAPIReady(), your function hasn't yet been defined.

Answer 4

I have the same problem. It seems to relate to putting the iframe in manually instead of using the div tag substitution. If I use the div method it works fine, manual iframe, no.

Async load of the API script, or including it in the head manually didn't make any difference.

I have just gone with the div substitution for now, and stopped fighting it.