Cannot load video inside a interactive form

Hey,

I am not sure If you are referring to the problem I was facing, but I fixed the problem by reinitializing the script like this:

function wrapAndInitializePlayers() {
    // Ensure the existing initialization logic is rerun
    wrapPlayers();

    var players = document.querySelectorAll(".ckin__player");
    players.forEach(function(e) {
        var n = e.querySelector("video"),
            t = attachSkin(n.dataset.ckin);
        e.classList.add(t);
        addOverlay(e, n.dataset.overlay);
        var o = showTitle(t, n.dataset.title);
        o && e.insertAdjacentHTML("beforeend", o);
        var r = buildControls(t);
        e.insertAdjacentHTML("beforeend", r);
        addColor(e, n.dataset.color);
        var i = e.querySelector("." + t + "__controls"),
            s = e.querySelector(".progress"),
            l = e.querySelector(".progress__filled"),
            c = e.querySelectorAll(".toggle"),
            a = e.querySelector(".volume"),
            u = e.querySelector(".fullscreen");

        n.addEventListener("click", function() {
            togglePlay(this, e);
        });
        n.addEventListener("play", function() {
            updateButton(this, c);
        });
        n.addEventListener("pause", function() {
            updateButton(this, c);
        });
        n.addEventListener("timeupdate", function() {
            handleProgress(this, l);
        });
        c.forEach(function(t) {
            return t.addEventListener("click", function() {
                togglePlay(n, e);
            });
        });
        a.addEventListener("click", function() {
            toggleVolume(n, a);
        });
        var d = !1;
        s.addEventListener("click", function(e) {
            scrub(e, n, s);
        });
        s.addEventListener("mousemove", function(e) {
            return d && scrub(e, n, s);
        });
        s.addEventListener("mousedown", function() {
            return d = !0;
        });
        s.addEventListener("mouseup", function() {
            return d = !1;
        });
        u.addEventListener("click", function(n) {
            return toggleFullScreen(e, u);
        });
        addListenerMulti(e, "webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange", function(n) {
            return onFullScreen(n, e);
        });
    });
}

After you dynamically add the videos in you interactive form (maybe Ajax?) you can just trigger wrapAndInitializePlayers(); and It should work.

hunzaboy / Ckin-Video-Player

Cannot load video inside a interactive form #13