Slider Autoplay

We have 2 videos on our careers page (http://www.affinnova.com/careers) that are included in a slider. The slider is based off of glide.js – which I’m not too familiar with.

The problem is that when the page loads, there is an animation that slides between the 2 videos. If you start playing a video, it will slide to the next when while it’s playing. I’m trying to figure out which part of the code I need to address to prevent this behavior. Here’s the code:

(function (f, e, b, h) {
    var d = "glide",
        g = {
            autoplay: 4000,
            animationTime: 500,
            arrows: true,
            arrowsWrapperClass: "slider-arrows",
            arrowMainClass: "slider-arrow",
            arrowRightClass: "slider-arrow--right",
            arrowRightText: "next",
            arrowLeftClass: "slider-arrow--left",
            arrowLeftText: "prev",
            nav: true,
            navCenter: true,
            navClass: "slider-nav",
            navItemClass: "slider-nav__item",
            navCurrentItemClass: "slider-nav__item--current",
            touchDistance: 60
        };

    function a(k, j) {
        var i = this;
        i.options = f.extend({}, g, j);
        i.parent = k;
        i.wrapper = i.parent.children();
        i.slides = i.wrapper.children();
        i.currentSlide = 0;
        i.CSS3support = true;
        i.init();
        i.build();
        i.play();
        if (i.options.touchDistance) {
            i.swipe()
        }
        f(b).on("keyup", function (l) {
            if (l.keyCode === 39) {
                i.slide(1)
            }
            if (l.keyCode === 37) {
                i.slide(-1)
            }
        });
        i.parent.add(i.arrows).add(i.nav).on("mouseover mouseout", function (l) {
            i.pause();
            if (l.type === "mouseout") {
                i.play()
            }
        });
        f(e).on("resize", function () {
            i.init();
            i.slide(0)
        });
        return {
            current: function () {
                return -(i.currentSlide) + 1
            },
            play: function () {
                i.play()
            },
            pause: function () {
                i.pause()
            },
            next: function (l) {
                i.slide(1, false, l)
            },
            prev: function (l) {
                i.slide(-1, false, l)
            },
            jump: function (m, l) {
                i.slide(m - 1, true, l)
            },
            nav: function (l) {
                if (i.navWrapper) {
                    i.navWrapper.remove()
                }
                i.options.nav = (l) ? l : i.options.nav;
                i.navigation()
            },
            arrows: function (l) {
                if (i.arrowsWrapper) {
                    i.arrowsWrapper.remove()
                }
                i.options.arrows = (l) ? l : i.options.arrows;
                i.arrows()
            }
        }
    }
    a.prototype.build = function () {
        var i = this;
        if (i.options.arrows) {
            i.arrows()
        }
        if (i.options.nav) {
            i.navigation()
        }
    };
    a.prototype.navigation = function () {
        var j = this;
        if (j.slides.length > 1) {
            var q = j.options,
                n = (j.options.nav === true) ? j.parent : j.options.nav;
            j.navWrapper = f("<div />", {
                "class": q.navClass
            }).appendTo(n);
            var p = j.navWrapper,
                l;
            for (var k = 0; k < j.slides.length; k++) {
                l = f("<a />", {
                    href: "#",
                    "class": q.navItemClass,
                    "data-distance": k
                }).appendTo(p);
                p[k + 1] = l
            }
            var m = p.children();
            m.eq(0).addClass(q.navCurrentItemClass);
            if (q.navCenter) {
                p.css({
                    left: "50%",
                    width: m.outerWidth(true) * m.length,
                    "margin-left": -p.outerWidth(true) / 2
                })
            }
            m.on("click touchstart", function (i) {
                i.preventDefault();
                j.slide(f(this).data("distance"), true)
            })
        }
    };
    a.prototype.arrows = function () {
        var j = this;
        if (j.slides.length > 1) {
            var l = j.options,
                k = (j.options.arrows === true) ? j.parent : j.options.arrows;
            j.arrowsWrapper = f("<div />", {
                "class": l.arrowsWrapperClass
            }).appendTo(k);
            var i = j.arrowsWrapper;
            i.right = f("<a />", {
                href: "#",
                "class": l.arrowMainClass + " " + l.arrowRightClass,
                "data-distance": "1",
                html: l.arrowRightText
            }).appendTo(i);
            i.left = f("<a />", {
                href: "#",
                "class": l.arrowMainClass + " " + l.arrowLeftClass,
                "data-distance": "-1",
                html: l.arrowLeftText
            }).appendTo(i);
            i.children().on("click touchstart", function (m) {
                m.preventDefault();
                j.slide(f(this).data("distance"), false)
            })
        }
    };
    a.prototype.slide = function (j, q, p) {
        var o = this,
            l = (q) ? 0 : o.currentSlide,
            m = -(o.slides.length - 1),
            n = o.options.navCurrentItemClass,
            i = o.slides.spread;
        o.pause();
        if (l === 0 && j === -1) {
            l = m
        } else {
            if (l === m && j === 1) {
                l = 0
            } else {
                l = l + (-j)
            }
        }
        var k = i * l + "px";
        if (o.CSS3support) {
            o.wrapper.css({
                "-webkit-transform": "translate3d(" + k + ", 0px, 0px)",
                "-moz-transform": "translate3d(" + k + ", 0px, 0px)",
                "-ms-transform": "translate3d(" + k + ", 0px, 0px)",
                "-o-transform": "translate3d(" + k + ", 0px, 0px)",
                transform: "translate3d(" + k + ", 0px, 0px)"
            })
        } else {
            o.wrapper.stop().animate({
                "margin-left": k
            }, o.options.animationTime)
        } if (o.options.nav) {
            o.navWrapper.children().eq(-l).addClass(n).siblings().removeClass(n)
        }
        o.currentSlide = l;
        if ((p !== "undefined") && (typeof p === "function")) {
            p()
        }
        o.play()
    };
    a.prototype.play = function () {
        var i = this;
        if (i.options.autoplay) {
            i.auto = setInterval(function () {
                i.slide(1, false)
            }, i.options.autoplay)
        }
    };
    a.prototype.pause = function () {
        if (this.options.autoplay) {
            this.auto = clearInterval(this.auto)
        }
    };
    a.prototype.swipe = function () {
        var u = this,
            q, o, k, j, r, p, v, w, l, s = 180 / Math.PI,
            t, i, n, m;
        u.parent.on("touchstart", function (x) {
            q = x.originalEvent.touches[0] || x.originalEvent.changedTouches[0];
            k = q.pageX;
            j = q.pageY
        });
        u.parent.on("touchmove", function (x) {
            q = x.originalEvent.touches[0] || x.originalEvent.changedTouches[0];
            r = q.pageX;
            p = q.pageY;
            t = r - k;
            i = p - j;
            n = Math.abs(t << 2);
            m = Math.abs(i << 2);
            v = Math.sqrt(n + m);
            w = Math.sqrt(m);
            l = Math.asin(w / v);
            if ((l * s) < 32) {
                x.preventDefault()
            }
        });
        u.parent.on("touchend", function (x) {
            q = x.originalEvent.touches[0] || x.originalEvent.changedTouches[0];
            o = q.pageX - k;
            if (o > u.options.touchDistance) {
                u.slide(-1)
            } else {
                if (o < -u.options.touchDistance) {
                    u.slide(1)
                }
            }
        })
    };
    a.prototype.init = function () {
        var i = this,
            j = i.parent.width();
        i.slides.spread = j;
        i.wrapper.width(j * i.slides.length);
        i.slides.width(i.slides.spread);
        if (!c("transition") || !c("transform")) {
            i.CSS3support = false
        }
    };

    function c(o) {
        var j = false,
            l = "Khtml Ms O Moz Webkit".split(" "),
            n = b.createElement("div"),
            m = null;
        o = o.toLowerCase();
        if (n.style[o]) {
            j = true
        }
        if (j === false) {
            m = o.charAt(0).toUpperCase() + o.substr(1);
            for (var k = 0; k < l.length; k++) {
                if (n.style[l[k] + m] !== h) {
                    j = true;
                    break
                }
            }
        }
        return j
    }
    f.fn[d] = function (i) {
        return this.each(function () {
            if (!f.data(this, "api_" + d)) {
                f.data(this, "api_" + d, new a(f(this), i))
            }
        })
    }
})(jQuery, window, document);

I already tried setting autoplay to false, which would seem to make sense, but that seems to turn playback off on the second video. In fact, the video playback controls seem to be hijacked by this script once you start playing a video.

Any help would be appreciated.