YouTube loop

plays a sequence of YouTube videos for 5 secs in loop

by Philippe Guglielmetti

HTML

<!DOCTYPE html>
<html>
<body>

<div id="player"></div>

<script>

    let chain = ['McbL844LPgo', 'mPI3Si5idlQ', 'FcKsfhV4dB8', '63tpQ-QE4Iw'],
        i = 0;

    let tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";

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

    let player;

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '360',
            width: '640',
            videoId: chain[i],
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerReady(event) {
        event.target.playVideo();
    }

    var done = false;

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
            setTimeout(nextVideo, 5000);
            done = true;
        }
        else {
            done = false;
        }
    }

    function nextVideo() {
        i = (i + 1) % chain.length
        player.loadVideoById(chain[i])
        player.start();
    }
</script>
</body>
</html>