I'm using YouTube Player API Reference for iframe the simple code

<div id="player"></div>
<script>
    //Load player api asynchronously.
    var tag = document.createElement('script');
    tag.src = "//www.youtube/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var done = false;
    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '327',
          width: '530',
          videoId: '_XaWYzsY920',
          playerVars: { 'autoplay': 1,'playlist':['Hzgzim5m7oU', 'QvZIYIVNGZ0']},
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
    }
    function onPlayerReady(evt) {
        evt.target.playVideo();
    }
    function onPlayerStateChange(evt) {
        console.log(evt.data);
        console.log(evt.target.getVideoUrl());
    }
</script>

I thought to work out with evt.data == 5 but it's never fired so ......

Is there is way ?

I'm using YouTube Player API Reference for iframe the simple code

<div id="player"></div>
<script>
    //Load player api asynchronously.
    var tag = document.createElement('script');
    tag.src = "//www.youtube./iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var done = false;
    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '327',
          width: '530',
          videoId: '_XaWYzsY920',
          playerVars: { 'autoplay': 1,'playlist':['Hzgzim5m7oU', 'QvZIYIVNGZ0']},
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
    }
    function onPlayerReady(evt) {
        evt.target.playVideo();
    }
    function onPlayerStateChange(evt) {
        console.log(evt.data);
        console.log(evt.target.getVideoUrl());
    }
</script>

I thought to work out with evt.data == 5 but it's never fired so ......

Is there is way ?

• javascript
• youtube-api

Share Improve this question Follow edited Feb 8, 2013 at 16:00 Russ Ferri 6,59922 gold badges2323 silver badges2424 bronze badges asked Feb 8, 2013 at 15:47 WhisherWhisher 32.8k3434 gold badges127127 silver badges204204 bronze badges 2

• Your code seems to work as expected. Do you get any error/warning in console? – Salman Arshad Commented Feb 8, 2013 at 16:27
• The code works but I don't find the way to catch the playing current video I'd like to point it out on a list just aside the player. – Whisher Commented Feb 8, 2013 at 17:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Inside onPlayerStateChange grab the video URL using evt.target.getVideoUrl() then extract the video id using regex:

function onPlayerStateChange(evt) {
    if (evt.data == YT.PlayerState.PLAYING) {
        var url = evt.target.getVideoUrl();
        // "http://www.youtube./watch?v=gzDS-Kfd5XQ&feature=..."
        var match = url.match(/[?&]v=([^&]+)/);
        // ["?v=gzDS-Kfd5XQ", "gzDS-Kfd5XQ"]
        var videoId = match[1];
    }
}

var videoId = evt.target.getVideoData().video_id