youtube looper tester

testing out the youtube js api

by edwardsharp

HTML

<div id="video1"></div>
<div id="clicker">CHANGE IT</div>

CSS

html, body {
    width:100%;
    height:100%;
}

#video1 {
    margin:0 auto;
    width:600px;
    height:283px;
    display:block;
}

#clicker {
    width:100%;
    height:100px;
    background:#ff6600;
    color:white;
    margin:15px auto;
    padding-top: 50px;
    text-align:center;
}

JavaScript

// "mini library" starts here
var youTubeAPILoaded = false;

function loadYouTubeAPI (callBack) {
    if (!youTubeAPILoaded) {
        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/player_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
        
        window.onYouTubePlayerAPIReady = function () {
            youTubeAPILoaded = true;
            callBack();
        }
    } else {
        callBack();
    }
}

function showVideoByID (domElement, videoID) {
    loadYouTubeAPI(function () {
        if (!domElement.player) {
            domElement.player = new YT.Player(domElement, {
                height      : '283',
                width       : '600',
                videoId     : videoID,
                playerVars: {
                    'rel'       : 0,
                    'autoplay'  : 1,
                    'loop'      : 1,
                    'playlist'  : videoID,
                    controls    : 0,
                    showinfo    : 0 ,
                 modestbranding : 1,
                    wmode       : "opaque"
                },
                events: {
                  'onStateChange': onPlayerStateChange
                }
            });
        } else {
            //player.loadVideoById({videoId:String, startSeconds:Number, endSeconds:Number, suggestedQuality:String}):Void
            domElement.player.loadVideoById(videoID);
        }
        nowPlaying = player;
        currentPopup[0].previousLanguage = language
    });

}
// end of "mini library"

var videoContainer = document.getElementById("video1");
showVideoByID(videoContainer , "NoDTqebi860");

    
var clicker = document.getElementById("clicker");
    clicker.onclick = function () {
        showVideoByID(videoContainer , "fWZHAy8zOOA");
    }

    // when video ends
    function onPlayerStateChange(event) {        
        if(event.data === 0) { ...