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?

Solution 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

Solution 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>

Comments

[mimrock]

I had the same problem, and this one fixed it.

[Danny R]

The original script in step 2 is intended to load the frame_api asynchronously. If you use the <script> tag, it will block the browser rendering until the script is loaded.