Full screen youtube videos

Full screen youtube videos that have playlist and play in a loop

by Ben Gillbanks

HTML

<script src="http://www.youtube.com/iframe_api"></script>
<div id="container"></div>

CSS

#container, #container iframe {
    width:100%;
    height:100vh;
}

JavaScript

var videos = [
    'hUmT6VYwO0U',
    'W6Ipl7vIUpE',
    'kUW0L_tNCG0'
];
    
var currentVideo = 0;

function onPlayerStateChange(event) {
    switch(event.data) {
        case YT.PlayerState.ENDED:
            nextVideo();
            break;
        case YT.PlayerState.PLAYING:
            break;
        case YT.PlayerState.PAUSED:
            break;
        case YT.PlayerState.BUFFERING:
            break;
        case YT.PlayerState.CUED:
            break;
    }
}

function setVideo( vidId ) {
    
    jQuery('#container').html('<iframe id="player_'+vidId+'" src="https://www.youtube.com/embed/' + vidId + '?enablejsapi=1&autoplay=1&autohide=1&showinfo=0" frameborder="0" allowfullscreen></iframe>');
    new YT.Player('player_' + vidId, {
        events: {
            'onStateChange': onPlayerStateChange
        }
    });    
}

function nextVideo() {
    currentVideo ++;
    if ( currentVideo > videos.length ) {
        currentVideo = 0;
    }
    console.log( "current video = " + currentVideo );
    setVideo( videos[ currentVideo ] );    
}

setVideo( videos[ currentVideo ] );