CODEWITHSUNDEEP
apiiframeyoutube
user1864891
user1864891

Reputation: 31

Youtube iFrame javascript API onYouTubeIframeAPIReady not firing

This is from the Youtube API docs:

"As mentioned in the Getting started section, instead of writing an empty element on your page, which the player API's JavaScript code will then replace with an element, you could create the tag yourself."

But I cannot get the API to callback to my javascript. Any help would be great.

Here's my HTML code: 

 <iframe id="player" type="text/html" width="640" height="360"src="http://www.youtube.com/embed/1_QO8LoGNpc?enablejsapi=1" frameborder="0"></iframe>

JAVASCRIPT:

<script>
    function onYouTubeIframeAPIReady() {
        alert("hey");
        player = new YT.Player('player', {
         // height: '720',
         // width: '1280',
         // videoId: '1_QO8LoGNpc',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
    }
</script>

I can get it to work with using javascript creating the iframe but not setting the iframe on the page. HELP!

Upvotes: 3

Views: 6049

Answers (2)

Subscriberius
Subscriberius

Reputation: 866

Function onYouTubeIframeAPIReady() should be defined before loading https://www.youtube.com/iframe_api.

Here is the idea:

<iframe id="player" type="text/html" width="640" height="360"src="http://www.youtube.com/embed/1_QO8LoGNpc?enablejsapi=1" frameborder="0"></iframe> 

    <script>
            function onYouTubeIframeAPIReady() {
            alert("hey");
            player = new YT.Player('player', {
             // height: '720',
             // width: '1280',
             // videoId: '1_QO8LoGNpc',
              events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
              }
            });
        }
    </script>

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

Why? Because iframe_api will call this function after being loaded. In your case iframe_api was loaded before.

Best regards.

Upvotes: 2

smohadjer
smohadjer

Reputation: 898

But your code works. See it here: http://jsfiddle.net/aXLA2/

<iframe id="player" type="text/html" width="640" height="360"src="http://www.youtube.com/embed/1_QO8LoGNpc?enablejsapi=1" frameborder="0"></iframe> 

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

Upvotes: 0

Related Questions