CODEWITHSUNDEEP
iframeyoutube-api
Henk Ertje
Henk Ertje

Reputation: 19

iframe api for multiple videos

I have a slideshow with youtube video's. But the problem now is that I can't trigger the onPlayerStateChange. This is my code:

echo '<iframe id="youtube" src="http://www.youtube.com/embed/kOkQ4T5WO9E?enablejsapi=1&autoplay=1&rel=0</iframe>';

This is the JavaScript:

<script src="/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('youtube', {
            events: { 'onStateChange': onPlayerStateChange }
        });
    }

    var tag = document.createElement('script');
    tag.src = "http://www.youtube.com/player_api";

    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    function onPlayerStateChange(event) {
        if (event.data === 0) {
            alert('Video finished, next slide');
            slide.next();
        }
    }
</script>

Is there a way to reload the iframe api when the video has ended?

Upvotes: 0

Views: 123

Answers (1)

AlgoRythm
AlgoRythm

Reputation: 168

I apologize, as last I knew, the YouTube API was entirely deprecated and almost no longer supported.

You're going to need to load new videos with the loadVideoByUrl function

player.loadVideoByUrl(mediaContentUrl:String,
                      startSeconds:Number,
                      suggestedQuality:String):Void

Also, you should change event.data === 0 to event.data == YT.PlayerState.ENDED

Upvotes: 1

Related Questions