end of youtube video

Question

I'm trying to come up figure out a way to automatically go to to the next post in line on a wordpress site when a youtube video in the current post has stopped playing. The youtube videos are not embeded with the youtube API but rather embeded using the iframe.

Does anyone have any idea how to do this?

This question helped me to achieve something similar: http://stackoverflow.com/questions/10580388/youtube-embedded-video-start-stop-event — David Alsbright, Oct 03 '15 at 21:18
Looks pretty good, but I see the YT video ID is already specified, since I have many videos already embeded on separate posts, how would that work? — TSurF, Oct 04 '15 at 10:31

score 0 · Answer 1 · edited May 23 '17 at 12:02

I'm adapting the code from this answer YouTube iframe API and WordPress. You'd have to rewrite your posts to use a shortcode or adapt the idea to your current configuration.

Videos are embeded using a shortcode pointing to the YT ID: [ytplayer id="M7lc1UVf-VE"], and the playback uses YT iFrame API.
We check the next post link using get_next_post() (could be get_previous_post()) and pass that to the JavaScript code. When the video ends, and if we have an actual next post, it will jump to the link:

add_shortcode( 'ytplayer', 'print_yt_player' );

function print_yt_player( $atts ) {
    wp_enqueue_script( 'yt-iframe', 'https://www.youtube.com/iframe_api' );
    $yt_id = $atts['id'];
    $next_post = get_next_post();
    $go_next = 'false';
    if (!empty( $next_post )) {
        $next_post = get_permalink($next_post);
        $go_next = 'true';
    } else {
        $next_post = '';
    }

    $html = <<<HTML
        <div id="player"></div>   
        <script>
            var player, done = false;
            function onYouTubeIframeAPIReady() {
                player = new YT.Player('player', {
                    height: '390',
                    width: '640',
                    videoId: '$yt_id',
                    playerVars: { 'autoplay': 1, 'controls': 1 },
                    events: {
                        'onReady': onPlayerReady,
                        'onStateChange': onPlayerStateChange
                    }
                });
            }    
            function onPlayerReady(event) {
                event.target.playVideo();
            }
            function onPlayerStateChange(event) {
                if( event.data == YT.PlayerState.ENDED && $go_next ) 
                    window.location.href = '$next_post';
            }
        </script>
HTML;
    # It's important that the previous line doesn't have ANY whitespace before of after HTML;
    return $html;
}

end of youtube video

1 Answers1