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?

score 6 · Answer 1 · answered Aug 04 '11 at 05:06

6

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

answered Aug 04 '11 at 05:06

Adeel

61
1

2

I had the same problem, and this one fixed it. – mimrock Apr 05 '12 at 11:48

score 3 · Answer 2 · answered Apr 19 '13 at 17:04

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>

The original script in step 2 is intended to load the frame_api asynchronously. If you use the — Danny R, Oct 20 '14 at 13:31

score 0 · Answer 3 · answered Oct 13 '22 at 21:01

0

There is also &enablejsapi=1 which needs to be done in creating the embedded player- otherwise the API will ignore your JS side.

answered Oct 13 '22 at 21:01

AgeingBrit

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 17 '22 at 22:25

score 0 · Answer 4 · answered Feb 08 '12 at 02:56

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.

score 0 · Answer 5 · answered Mar 30 '12 at 18:48

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.

youtube iframe events

5 Answers5

Linked