OnStateChange not working after refresh of iframe

Question

I've got an iframe that will play videos between a start and end time. When end time is reached (case 0), I want to load the almost same URL (differing at autoplay=0).

The problem is that OnStateChange does not seem to register any changes after the first refresh of the iframe, and thus it doesn't reload after a second viewing and plays the video from the beginning the third time. What do I do to keep the video reloading when hitting the end time?

Also, I've looked at this question here on Stack Overflow, but I couldn't make anything out of that unfortunately – though the solution might be there?

(Perhaps it seems like an odd thing to do, but for the moment this is the solution I need.)

Also — a somewhat unrelated question; I'm having some trouble renaming id="player" ytplayer instead. Is that not supposed to be altered?

<html>
<head>
<script type="text/javascript" src="http://www.youtube.com/player_api"> </script>
<script>
var player;
// This function creates an <iframe> (and YouTube player)
// after the API code downloads.
function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
        events: {
            'onStateChange': function (event) {
                switch (event.data) {
                    case -1:
                        console.log ('unstarted');
                        break;
                    case 0:
                        console.log ('ended');
                        var iframe = document.getElementById('player');
                            //autoplay=0
                            iframe.src = "http://www.youtube.com/embed/TINASKjjNfw?&enablejsapi=1&controls=1&showinfo=1&start=20&end=25&rel=0&autoplay=0"
                        console.log ('player reloaded');                        
                        break;
                    case 1:
                        console.log ('playing');
                        break;
                    case 2:
                        console.log ('paused');
                        break;
                    case 3:
                        console.log ('buffering');
                        break;
                    case 5:
                        console.log ('video cued');
                        break;
                }
            }
        }
    });
}
</script>
</head>
<body>

    <iframe class="video-frame" id="player" width="560" height="315" 
    src="http://www.youtube.com/embed/TINASKjjNfw?&enablejsapi=1&controls=1&showinfo=1&start=20&end=25&rel=0&autoplay=1"
    frameborder="0"></iframe>
</body>
</html>

Update – I've also tried the code below, as from here, but without greater luck.

<script>
function floaded1() {

player1 = new YT.Player('player1', {
        events: {
            'onStateChange': function (event) {
if (event.data == 0) {
                        var iframe = document.getElementById('player1');
                            iframe.src = "http://www.youtube.com/embed/TINASKjjNfw?&enablejsapi=1&controls=1&showinfo=1&start=20&end=25&rel=0&autoplay=0" //autoplay=0
};
            }
        }
    });
}    </script>

    </head>
<body>

<iframe onload="floaded1()" id="player1" width="240" height="220" 
src="http://www.youtube.com/embed/0Bmhjf0rKe8
?enablejsapi=1&rel=0&showinfo=2&iv_load_policy=3&modestbranding=1&start=10&end=15&rel=0&autoplay=1" 
frameborder="0" allowfullscreen> </iframe>

score 2 · Accepted Answer · answered Aug 23 '14 at 13:35

I figured out a solution that works, posting the solution if anyone would ever need something similar.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://www.youtube.com/player_api"> </script>
</head>
<body>
<script>
function onEndReload() {
    ytplayer = new YT.Player('ytplayer', {
        events: {
            'onStateChange': function (event) {
                if (event.data == 0) {
                        var iframe = document.getElementById('ytplayer');
                            //use iframe.src = iframe.src if you want to reload the url in the iframe, if not – se below;
                            iframe.src = "http://www.youtube.com/embed/M7lc1UVf-VE?&enablejsapi=1&controls=1&showinfo=1&start=20&end=25&rel=0&autoplay=0"
                            onEndReload();
                            console.log ('player reloaded'); 
                };
            }
        }
    });
}
</script>
<iframe onload="onEndReload()" id="ytplayer" name="ytplayeriframe" width="560" height="315" src="http://www.youtube.com/embed/M7lc1UVf-VE?&enablejsapi=1&controls=1&showinfo=1&start=20&end=25&rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
</body>
</html>

OnStateChange not working after refresh of iframe

1 Answers1