Youtube Javascript player ASPI "ytplayer is not a function"

Question

I have this code in html:

        <div class="flex-video widescreen youtube">
            <iframe id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/{{Video.v_id}}?autoplay=1&enablejsapi=1&autohide=1" frameborder="0" allowfullscreen> </iframe>
        </div>

and this code in Javascript:

        function onYouTubePlayerReady(playerId) {
            console.log("player ready");
            ytplayer = document.getElementById("ytplayer");
        }

When I type in Firefox console this:

ytplayer.playVideo();

I get the not function error:

TypeError: ytplayer.playVideo is not a function

Also the console.log("player ready"); does not print at all.

Can anybody help me?

I want to controll the player with javascript api not with the IFrame api. And I want the video player to be in html5.

edit: I have the jspapi enabled (enablejsapi=1)

This is impossible; the YouTube javascript API (which was many years ago before there was any HTML5 video on YouTube) can only control an embedded SWF. The iFrame API was created specifically to let you work with HTML5 video with SWF fallback, so that's the one to use. — jlmcdonald
– jlmcdonald, Commented Oct 31, 2014 at 4:11
@jlmcdonald So can I establish manually the <iframe> then control it with the IFrame API without using dhe <div id="player"></div> ? — em.rexhepi
– em.rexhepi, Commented Oct 31, 2014 at 8:34
You won't have to have a <div> if you already included the <iframe> in the DOM ... just give your <iframe> an ID attribute and pass that to the YT.Player constructor (when you do so, leave out the width, height, and videoId parameters of the constructor object, as your iframe already establishes those). — jlmcdonald
– jlmcdonald, Commented Nov 1, 2014 at 5:52

vaskort · Accepted Answer · 2015-09-15 13:50:34Z

6

What works for me is adding the youtube by file and from the JS and then using the onYoutubePlayerAPIReady event like this:

 window.onYouTubePlayerAPIReady = function(){
            var player = new YT.Player('player', {
                height: '390',
                width: '640',
                videoId: 'M7lc1UVf-VE',
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }

answered Sep 15, 2015 at 13:50

vaskort

2,8712 gold badges22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DPac Over a year ago

Works for me a year later!

mpgn · Accepted Answer · 2014-10-30 15:44:58Z

1

If you follow the doc of the YouTube API Player

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="player"></div>
</body>
</html>

JS

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'l-gQLqv9f4o',
        events: {
            'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
        }
    });
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
    event.target.playVideo();
}

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {

    }
}

function stopVideo() {
    player.stopVideo();
}

Live demo

answered Oct 30, 2014 at 15:44

mpgn

7,28111 gold badges70 silver badges102 bronze badges

1 Comment

em.rexhepi Over a year ago

I really appreciate your response. I managed the iframe api to work developers.google.com/youtube/iframe_api_reference but this does not work very well on my meteorjs application I'm trying to implement the JavaScript player api developers.google.com/youtube/js_api_reference i dont want to do this with swf player but with html5 as primary then fallback in swf. Thank you in advance.

Collectives™ on Stack Overflow

Youtube Javascript player ASPI "ytplayer is not a function"

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related