Gw0bm/public/njum/js/floatvids.js

//var $window = $(window);
//var $videoWrap = $('.video-wrap');
//var $video = $('.video');
//var videoHeight = $video.outerHeight();
//
//$window.on('scroll',  function() {
//  var windowScrollTop = $window.scrollTop();
//  var videoBottom = videoHeight + $videoWrap.offset().top;
//  
//  if (windowScrollTop > videoBottom) {
//    $videoWrap.height(videoHeight);
//    $video.addClass('stuck');
//  } else {
//    $videoWrap.height('auto');
//    $video.removeClass('stuck');
//  }
//});

var ytIframeList, videoList, currentPlayer, closeButton, gradientOverlay, fullScreenIcon;
var inViewPortBol = true;
var ytIframeIdList = [];
var ytVideoId = [];
var ytPlayerId = [];
var videoTagId = [];
var events = new Array("pause", "playing");

document.addEventListener('DOMContentLoaded', function () {

    /*Adding Youtube Iframe API to body*/


    /*Getting all the iframe from the Page and finding out valid URL and ID. Then creating instance of players*/



    /*Getting Video Tag List and Creating instances*/

    videoList = document.getElementsByTagName("video");
    for (i = 0; i < videoList.length; i++) {
        videoList[i].id = "video-wrap" + i;
        videoTagId.push("video" + i);
        videoTagId[i] = document.getElementById(videoList[i].id);

    }
    for (i = 0; i < videoTagId.length; i++) {
        for (var j in events) {
            videoTagId[i].addEventListener(events[j], videoTagPlayerhandler, false);
        }
    }



});

window.onYouTubeIframeAPIReady = function () {
    for (i = 0; i < ytIframeIdList.length; i++) {
        ytPlayerId[i] = new YT.Player(ytIframeList[i].id, {
            events: {
                "onStateChange": onPlayerStateChange
            }
        });
    }
};

function videoTagPlayerhandler(e) {
    /*Play Rules*/
    for (i = 0; i < videoTagId.length; i++) {
        if (e.target == videoTagId[i]) {
            if (e.type == "playing") {
                currentPlayer = videoTagId[i];
                videoTagId[i].classList.remove("is-paused");
                videoTagId[i].classList.add("is-playing");
                break;
            }
        }
    }
    for (i = 0; i < videoTagId.length; i++) {
        if (currentPlayer == videoTagId[i]) {
            continue;
        }
        videoTagId[i].classList.remove("is-playing");
        videoTagId[i].classList.add("is-paused");
    }

    /*Pause Rules*/
    for (i = 0; i < videoTagId.length; i++) {
        if (e.target == videoTagId[i]) {
            if (e.type == "pause") {
                videoTagId[i].classList.add("is-paused");
                videoTagId[i].classList.remove("is-playing");
                videoTagId[i].pause();
            }
        }
    }

    /*Sticky Rules*/
    for (i = 0; i < videoTagId.length; i++) {
        if (videoTagId[i].classList.contains("is-sticky")) {
            videoTagId[i].pause();
        }
    }

    for (i = 0; i < ytPlayerId.length; i++) {
        if (ytVideoId[i].classList.contains("is-sticky")) {
            ytPlayerId[i].pauseVideo();
            fullScreenIcon.style.display = "none";

        }
    }

    /*End Rules*/
    for (i = 0; i < videoTagId.length; i++) {
        if (e.target == videoTagId[i]) {
            if (e.type == "ended") {
                videoTagId[i].classList.remove("is-playing");
                videoTagId[i].classList.remove("is-paused");
            }
        }
    }
    videohandler();
};

function onPlayerStateChange(event) {

    /*Play Rules*/

    for (i = 0; i < ytPlayerId.length; i++) {
        if (ytPlayerId[i].getPlayerState() === 1) {
            currentPlayer = ytVideoId[i];
            ytVideoId[i].classList.remove("is-paused");
            ytVideoId[i].classList.add("is-playing");
            break;
        }
    }
    for (i = 0; i < ytVideoId.length; i++) {
        if (currentPlayer == ytVideoId[i]) {
            continue;
        }
        ytVideoId[i].classList.remove("is-playing");
        ytVideoId[i].classList.add("is-paused");
    }

    /*Pause Rules*/

    for (i = 0; i < ytPlayerId.length; i++) {
        if (ytPlayerId[i].getPlayerState() === 2) {
            ytVideoId[i].classList.add("is-paused");
            ytVideoId[i].classList.remove("is-playing");
            ytPlayerId[i].pauseVideo();
        }
    }


    /*Sticky Rules*/

    for (i = 0; i < ytPlayerId.length; i++) {
        if (ytVideoId[i].classList.contains("is-sticky")) {
            ytPlayerId[i].pauseVideo();
            fullScreenIcon.style.display = "none";

        }
    }

    for (i = 0; i < videoTagId.length; i++) {
        if (videoTagId[i].classList.contains("is-sticky")) {
            videoTagId[i].pause();
            fullScreenIcon.style.display = "none";

        }
    }

    /*End Rule*/

    for (i = 0; i < ytPlayerId.length; i++) {
        if (ytPlayerId[i].getPlayerState() === 0) {
            ytVideoId[i].classList.remove("is-playing");
            ytVideoId[i].classList.remove("is-paused");
        }
    }
    videohandler();
}

function videohandler() {

    if (currentPlayer) {
        if (closeButton) {
            closeButton.addEventListener("click", function (e) {
                if (currentPlayer.classList.contains("is-sticky")) {
                    currentPlayer.classList.remove("is-sticky");

                    for (i = 0; i < ytVideoId.length; i++) {
                        if (currentPlayer == ytVideoId[i]) {
                            ytPlayerId[i].pauseVideo();
                        }
                    }
                    for (i = 0; i < videoTagId.length; i++) {
                        if (currentPlayer == videoTagId[i]) {
                            videoTagId[i].pause();
                        }
                    }

                } else {
                    for (i = 0; i < ytVideoId.length; i++) {
                        if (currentPlayer != ytVideoId[i]) {
                            ytVideoId[i].classList.remove("is-sticky");
                        }
                    }
                    for (i = 0; i < videoTagId.length; i++) {
                        if (currentPlayer != videoTagId[i]) {
                            videoTagId[i].classList.remove("is-sticky");
                        }
                    }
                }

            });
        }
    }
}

window.addEventListener('scroll', function () {

    inViewPortBol = inViewPort();
    if (currentPlayer) {
        if (!inViewPortBol && currentPlayer.classList.contains("is-playing")) {
            for (i = 0; i < ytVideoId.length; i++) {
                if (currentPlayer != ytVideoId[i]) {
                    ytVideoId[i].classList.remove("is-sticky");
                }
            }
            for (i = 0; i < videoTagId.length; i++) {
                if (currentPlayer != videoTagId[i]) {
                    videoTagId[i].classList.remove("is-sticky");
                }
            }
            currentPlayer.classList.add("is-sticky");
        } else {
            if (currentPlayer.classList.contains("is-sticky")) {
                currentPlayer.classList.remove("is-sticky");
            }
        }
    }
});




function inViewPort() {

    if (currentPlayer) {
        var videoParentLocal = currentPlayer.parentElement.getBoundingClientRect();
        return videoParentLocal.bottom > 0 &&
            videoParentLocal.right > 0 &&
            videoParentLocal.left < (window.innerWidth || document.documentElement.clientWidth) &&
            videoParentLocal.top < (window.innerHeight || document.documentElement.clientHeight);
    }
}