None of the YouTube javascript is working in an html page, How Come?

JavaScript
1

When I make an html page, none of the javasrcipt is working.

The YouTube portions to be exact.

Works without an issue in jsfiddle and codepen.

What seems to be the issue?

And how would it be fixed?

Maybe I’m putting it in wrong.

I can’t place the code on the page because it is too big.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My HTML Document</title>
<style type="text/css">
    body {
        font-family: Arial, sans-serif;
    }
</style>
</head>
<body>
    <h1>Hello World!</h1>

<script>
const load = (function makeLoad() {
    "use strict";

    function _load(tag) {
        return function (url) {
            return new Promise(function (resolve) {
                const element = document.createElement(tag);
                const parent = "body";
                const attr = "src";
                element.onload = function () {
                    resolve(url);
                };
                element[attr] = url;
                document[parent].appendChild(element);
            });
        };
    }
    return {
        js: _load("script")
    };
}());



(function manageCover() {
    "use strict";

    function hide(el) {
        el.classList.add("hide");
    }

    function coverClickHandler(evt) {
        const cover = evt.currentTarget;
        hide(cover);
    }
    const cover = document.querySelector(".jacket-left");
    cover.addEventListener("click", coverClickHandler);
}());

(function manageCover() {
    "use strict";

    function hide(el) {
        el.classList.add("hide");
    }

    function coverClickHandler(evt) {
        const cover = evt.currentTarget;
        hide(cover);
    }
    const cover = document.querySelector(".jacket-right");
    cover.addEventListener("click", coverClickHandler);
}());


(function iife() {
    "use strict";

    function show(el) {
        el.classList.remove("hide");
    }

    function hide(el) {
        el.classList.add("hide");
    }

    function getButtonContainer(el) {
        while (el.classList.contains("playButton") === false) {
            el = el.parentNode;
        }
        return el;
    }

    function hideAllButtons(button) {
        const buttons = button.querySelectorAll(".play, .pause, .speaker");
        for (let i = 0; i < buttons.length; i += 1) {
            hide(buttons[i]);
        }
    }

    function getPlay(button) {
        return button.querySelector(".play");
    }

    function getPause(button) {
        return button.querySelector(".pause");
    }

    function showPlayButton(button) {
        const play = getPlay(button);
        hideAllButtons(button);
        show(play);
        button.classList.remove("active");
    }

    function isPlaying(button) {
        const play = getPlay(button);
        return play.classList.contains("hide");
    }

    function pauseAllButtons() {
        let buttons = document.querySelectorAll(".playButton");
        for (let i = 0; i < buttons.length; i += 1) {
            if (isPlaying(buttons[i])) {
                showPlayButton(buttons[i]);
            }
        }
    }

    function showPauseButton(button) {
        const pause = getPause(button);
        pauseAllButtons();
        hideAllButtons(button);
        show(pause);
        button.classList.add("active");
    }

    function getAudio() {
        return document.querySelector("audio");
    }

    function playAudio(player, src) {
        player.volume = 1.0;
        if (player.getAttribute("src") !== src) {
            player.setAttribute("src", src);
        }
        player.play();
    }

    function showButton(button, opts) {
        if (opts.playing) {
            showPlayButton(button);
        } else {
            showPauseButton(button);
        }
    }

    function pauseAudio(player) {
        player.pause();
    }

    function manageAudio(player, opts) {
        if (opts.playing) {
            pauseAudio(player);
        } else {
            playAudio(player, opts.src);
        }
    }

    function togglePlayButton(button) {
        const player = getAudio();
        const playing = isPlaying(button);
        showButton(button, {
            playing
        });
        manageAudio(player, {
            src: button.getAttribute("data-audio"),
            playing
        });
    }

    function playButtonClickHandler(evt) {
        const button = getButtonContainer(evt.target);
        togglePlayButton(button);
    }

    function initButton(selector) {
        const wrapper = document.querySelector(selector);
        wrapper.addEventListener("click", playButtonClickHandler);
    }
    initButton(".wrapa");
}());
(function manageCover() {
    "use strict";

    function hide(el) {
        el.classList.add("hide");
    }

    function coverClickHandler(evt) {
        const cover = evt.currentTarget;
        hide(cover);
    }
    const cover = document.querySelector(".jacketc");
    cover.addEventListener("click", coverClickHandler);
}());
(function manageCover() {
    "use strict";

    function show(el) {
        el.classList.remove("hide");
    }

    function hide(el) {
        el.classList.add("hide");
    }

    function coverClickHandler(evt) {
        const cover = evt.currentTarget;
        const thewrap = cover.parentNode.querySelector(".wraph");
        hide(cover);
        show(thewrap);
    }
    const cover = document.querySelector(".jacketd ");
    cover.addEventListener("click", coverClickHandler);
}());
const videoPlayer = (function makeVideoPlayer() {
    "use strict";
    const players = [];

    function onPlayerReady(event) {
        const player = event.target;
        player.setVolume(100); // percent
    }

    let hasShuffled = false;

    function onPlayerStateChange(event) {
        const player = event.target;
        if (!hasShuffled) {
            player.setShuffle(true);
            player.playVideoAt(0);
            hasShuffled = true;
        }
        if (event.data === YT.PlayerState.PLAYING) {
            for (let i = 0; i < players.length; i++) {
                if (players[i] !== event.target) players[i].pauseVideo();
            }
        }

        const playerVars = player.b.b.playerVars;
        if (playerVars.loop && event.data === YT.PlayerState.ENDED) {
            player.seekTo(playerVars.start);
        }
    }

    function addVideo(video, settings) {
        players.push(new YT.Player(video, Object.assign({
            videoId: video.dataset.id,
            host: "https://www.youtube-nocookie.com",
            events: {
                "onReady": onPlayerReady,
                "onStateChange": onPlayerStateChange
            }
        }, settings)));
    }

    function init(video, settings) {
        load.js("https://www.youtube.com/player_api").then(function () {
            YT.ready(function () {
                addVideo(video, settings);
            });
        });
    }
    return {
        init
    };
}());

function loadPlayer(opts) {
    "use strict";

    function show(el) {
        el.classList.remove("hide");
    }

    function initPlayer(wrapper) {
        const video = wrapper.querySelector(".video");
        opts.width = opts.width || 198;
        opts.height = opts.height || 198;
        opts.autoplay = 1;
        opts.controls = 1;
        opts.rel = 0;
        opts.iv_load_policy = 3;
        opts.fs = 0;
        opts.disablekb = 1;

        function paramInOpts(settings, param) {
            if (opts[param] !== undefined) {
                settings[param] = opts[param];
            }
            return settings;
        }
        const settingsParams = ["width", "height", "videoid", "host"];
        const settings = settingsParams.reduce(paramInOpts, {});
        const playerVarsParams = ["autoplay", "cc_load_policy",
            "controls", "disablekb", "end", "fs", "iv_load_policy",
            "list", "listType", "loop", "playlist", "rel", "start"
        ];
        settings.playerVars = playerVarsParams.reduce(paramInOpts, {});
        videoPlayer.init(video, settings);
    }

    function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.nextElementSibling;
        show(wrapper);
        initPlayer(wrapper);
    }
    const cover = document.querySelector(opts.target);
    cover.addEventListener("click", coverClickHandler);
}
const playlist = "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g";

loadPlayer({
    target: ".jacket-left",
    width: 424,
    height: 238
});
loadPlayer({
    target: ".jacket-right",
    width: 424,
    height: 238
});


loadPlayer({
    target: ".jacketc",
    width: 600,
    height: 338,
    loop: true,
    playlist
});
loadPlayer({
    target: ".alpha",
    start: 0,
    end: 280,
    loop: true
});
loadPlayer({
    target: ".beta",
    start: 0,
    end: 240,
    loop: true
});
loadPlayer({
    target: ".gamma",
    start: 0,
    end: 265,
    loop: true
});
loadPlayer({
    target: ".delta",
    start: 4,
    end: 254,
    loop: true
});
loadPlayer({
    target: ".epsilon",
    start: 0,
    end: 242,
    loop: true
});
loadPlayer({
    target: ".zeta",
    start: 0,
    end: 285,
    loop: true
});
loadPlayer({
    target: ".eta",
    start: 23,
    end: 312,
    loop: true
});
loadPlayer({
    target: ".theta",
    start: 2
});
loadPlayer({
    target: ".iota"
});
(function iife() {
    "use strict";

    function show(el) {
        el.classList.remove("hide");
    }

    function hide(el) {
        el.classList.add("hide");
    }

    function getButtonContainer(el) {
        while (el.classList.contains("playButton") === false) {
            el = el.parentNode;
        }
        return el;
    }

    function hideAllButtons(button) {
        const buttons = button.querySelectorAll(".play, .pause, .speaker");
        for (let i = 0; i < buttons.length; i += 1) {
            hide(buttons[i]);
        }
    }

    function getPlay(button) {
        return button.querySelector(".play ");
    }

    function getPause(button) {
        return button.querySelector(".pause");
    }

    function getSpeaker(button) {
        return button.querySelector(".speaker");
    }

    function showPlayButton(button) {
        const play = getPlay(button);
        hideAllButtons(button);
        show(play);
        button.classList.remove("active");
    }

    function isPlaying(button) {
        const play = getPlay(button);
        return play.classList.contains("hide");
    }

    function pauseAllButtons() {
        const buttons = document.querySelectorAll(".playButton");
        for (let i = 0; i < buttons.length; i += 1) {
            if (isPlaying(buttons[i])) {
                showPlayButton(buttons[i]);
            }
        }
    }

    function showPauseButton(button) {
        const pause = getPause(button);
        pauseAllButtons();
        hideAllButtons(button);
        show(pause);
        button.classList.add("activated");
    }

    function showSpeakerButton(button) {
        const speaker = getSpeaker(button);
        hideAllButtons(button);
        show(speaker);
    }

    function getAudio() {
        return document.querySelector("audio");
    }

    function playAudio(player, src) {
        player.volume = 1.0;
        if (player.getAttribute("src") !== src) {
            player.setAttribute("src", src);
        }
        player.play();
    }

    function showButton(button, opts) {
        if (opts.playing) {
            showPlayButton(button);
        } else {
            showPauseButton(button);
        }
    }

    function pauseAudio(player) {
        player.pause();
    }

    function manageAudio(player, opts) {
        if (opts.playing) {
            pauseAudio(player);
        } else {
            playAudio(player, opts.src);
        }
    }

    function playButton(button) {
        const player = getAudio();
        const playing = isPlaying(button);
        showButton(button, {
            playing
        });
        manageAudio(player, {
            src: button.getAttribute("data-audio"),
            playing
        });
    }

    function showPause(button) {
        if (isPlaying(button)) {
            showPauseButton(button);
        }
    }

    function showSpeaker(button) {
        if (isPlaying(button)) {
            showSpeakerButton(button);
        }
    }

    function playButtonClickHandler(evt) {
        const button = getButtonContainer(evt.target);
        playButton(button);
    }

    function playButtonMouseoverHandler(evt) {
        const button = getButtonContainer(evt.target);
        showPause(button);
    }

    function playButtonMouseoutHandler(evt) {
        const button = getButtonContainer(evt.target);
        showSpeaker(button);
    }

    function initButton(selector) {
        const wrapper = document.querySelector(selector);
        wrapper.addEventListener("click", playButtonClickHandler);
        wrapper.addEventListener("mouseover", playButtonMouseoverHandler);
        wrapper.addEventListener("mouseout", playButtonMouseoutHandler);
    }
    initButton(".wrapb");
}());
(function iife() {
    "use strict";

    function show(el) {
        el.classList.remove("hide");
    }

    function hide(el) {
        el.classList.add("hide");
    }

    function getButtonContainer(el) {
        while (el.classList.contains("playButton") === false) {
            el = el.parentNode;
        }
        return el;
    }

    function hideAllButtons(button) {
        const buttons = button.querySelectorAll(".play, .pause, .speaker");
        for (let i = 0; i < buttons.length; i += 1) {
            hide(buttons[i]);
        }
    }

    function getPlay(button) {
        return button.querySelector(".play");
    }

    function getPause(button) {
        return button.querySelector(".pause");
    }

    function showPlayButton(button) {
        const play = getPlay(button);
        hideAllButtons(button);
        show(play);
        button.classList.remove("active");
    }

    function isPlaying(button) {
        const play = getPlay(button);
        return play.classList.contains("hide");
    }

    function pauseAllButtons() {
        let buttons = document.querySelectorAll(".playButton");
        for (let i = 0; i < buttons.length; i += 1) {
            if (isPlaying(buttons[i])) {
                showPlayButton(buttons[i]);
            }
        }
    }

    function showPauseButton(button) {
        const pause = getPause(button);
        pauseAllButtons();
        hideAllButtons(button);
        show(pause);
    }

    function getAudio() {
        return document.querySelector("audio");
    }

    function playAudio(player, src) {
        player.volume = 1.0;
        if (player.getAttribute("src") !== src) {
            player.setAttribute("src", src);
        }
        player.play();
    }

    function showButton(button, opts) {
        if (opts.playing) {
            showPlayButton(button);
        } else {
            showPauseButton(button);
        }
    }

    function pauseAudio(player) {
        player.pause();
    }

    function manageAudio(player, opts) {
        if (opts.playing) {
            pauseAudio(player);
        } else {
            playAudio(player, opts.src);
        }
    }

    function playButton(button) {
        const player = getAudio();
        const playing = isPlaying(button);
        showButton(button, {
            playing
        });
        manageAudio(player, {
            src: button.getAttribute("data-audio"),
            playing
        });
    }

    function playButtonClickHandler(evt) {
        const button = getButtonContainer(evt.target);
        playButton(button);
    }

    function initButton(selector) {
        const wrapper = document.querySelector(selector);
        wrapper.addEventListener("click", playButtonClickHandler);
    }
    initButton(".wrapc");
}());
(function iife() {
    "use strict";

    function show(el) {
        el.classList.remove("hide");
    }

    function hide(el) {
        el.classList.add("hide");
    }

    function getButtonContainer(el) {
        while (el.classList.contains("playButton") === false) {
            el = el.parentNode;
        }
        return el;
    }

    function hideAllButtons(button) {
        const buttons = button.querySelectorAll(".play, .pause, .speaker");
        for (let i = 0; i < buttons.length; i += 1) {
            hide(buttons[i]);
        }
    }

    function getPlay(button) {
        return button.querySelector(".play");
    }

    function getPause(button) {
        return button.querySelector(".pause");
    }

    function showPlayButton(button) {
        const play = getPlay(button);
        hideAllButtons(button);
        show(play);
        button.classList.remove("active");
    }

    function isPlaying(button) {
        const play = getPlay(button);
        return play.classList.contains("hide");
    }

    function pauseAllButtons() {
        let buttons = document.querySelectorAll(".playButton");
        for (let i = 0; i < buttons.length; i += 1) {
            if (isPlaying(buttons[i])) {
                showPlayButton(buttons[i]);
            }
        }
    }

    function showPauseButton(button) {
        const pause = getPause(button);
        pauseAllButtons();
        hideAllButtons(button);
        show(pause);
    }

    function getAudio() {
        return document.querySelector("audio");
    }

    function playAudio(player, src) {
        player.volume = 1.0;
        if (player.getAttribute("src") !== src) {
            player.setAttribute("src", src);
        }
        player.play();
    }

    function showButton(button, opts) {
        if (opts.playing) {
            showPlayButton(button);
        } else {
            showPauseButton(button);
        }
    }

    function pauseAudio(player) {
        player.pause();
    }

    function manageAudio(player, opts) {
        if (opts.playing) {
            pauseAudio(player);
        } else {
            playAudio(player, opts.src);
        }
    }

    function togglePlayButton(button) {
        const player = getAudio();
        const playing = isPlaying(button);
        showButton(button, {
            playing
        });
        manageAudio(player, {
            src: button.getAttribute("data-audio"),
            playing
        });
    }

    function playButtonClickHandler(evt) {
        const button = getButtonContainer(evt.target);
        togglePlayButton(button);
    }

    function initButton(selector) {
        const wrapper = document.querySelector(selector);
        wrapper.addEventListener("click", playButtonClickHandler);
    }
    initButton(".wrapd");
}());
(function iife() {
    "use strict";

    function show(el) {
        el.classList.remove("hide");
    }

    function hide(el) {
        el.classList.add("hide");
    }

    function coverClickHandler(evt) {
        const cover = evt.currentTarget;
        const thewrap = cover.parentNode.querySelector(".wrape");
        hide(cover);
        show(thewrap);
    }
    const cover = document.querySelector(".jacketb ");
    cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
    "use strict";

    function show(el) {
        el.classList.remove("hide");
    }

    function hide(el) {
        el.classList.add("hide");
    }

    function getButtonContainer(el) {
        while (el.classList.contains("playButton") === false) {
            el = el.parentNode;
        }
        return el;
    }

    function hideAllButtons(button) {
        const buttons = button.querySelectorAll(".play, .pause, .speaker");
        for (let i = 0; i < buttons.length; i += 1) {
            hide(buttons[i]);
        }
    }

    function getPlay(button) {
        return button.querySelector(".play");
    }

    function getPause(button) {
        return button.querySelector(".pause");
    }

    function showPlayButton(button) {
        const play = getPlay(button);
        hideAllButtons(button);
        show(play);
        button.classList.remove("active");
    }

    function isPlaying(button) {
        const play = getPlay(button);
        return play.classList.contains("hide");
    }

    function pauseAllButtons() {
        let buttons = document.querySelectorAll(".playButton");
        for (let i = 0; i < buttons.length; i += 1) {
            if (isPlaying(buttons[i])) {
                showPlayButton(buttons[i]);
            }
        }
    }

    function showPauseButton(button) {
        const pause = getPause(button);
        pauseAllButtons();
        hideAllButtons(button);
        show(pause);
    }

    function getAudio() {
        return document.querySelector("audio");
    }

    function playAudio(player, src) {
        player.volume = 1.0;
        if (player.getAttribute("src") !== src) {
            player.setAttribute("src", src);
        }
        player.play();
    }

    function showButton(button, opts) {
        if (opts.playing) {
            showPlayButton(button);
        } else {
            showPauseButton(button);
        }
    }

    function pauseAudio(player) {
        player.pause();
    }

    function manageAudio(player, opts) {
        if (opts.playing) {
            pauseAudio(player);
        } else {
            playAudio(player, opts.src);
        }
    }

    function togglePlayButton(button) {
        const player = getAudio();
        const playing = isPlaying(button);
        showButton(button, {
            playing
        });
        manageAudio(player, {
            src: button.getAttribute("data-audio"),
            playing
        });
    }

    function playButtonClickHandler(evt) {
        const button = getButtonContainer(evt.target);
        togglePlayButton(button);
    }

    function initButton(selector) {
        const wrapper = document.querySelector(selector);
        wrapper.addEventListener("click", playButtonClickHandler);
    }
    initButton(".wrape");
}());
(function iife() {
    "use strict";

    function show(el) {
        el.classList.remove("hide");
    }

    function hide(el) {
        el.classList.add("hide");
    }

    function getButtonContainer(el) {
        while (el.classList.contains("playButton") === false) {
            el = el.parentNode;
        }
        return el;
    }

    function hideAllButtons(button) {
        const buttons = button.querySelectorAll(".play, .pause, .speaker");
        for (let i = 0; i < buttons.length; i += 1) {
            hide(buttons[i]);
        }
    }

    function getPlay(button) {
        return button.querySelector(".play");
    }

    function getPause(button) {
        return button.querySelector(".pause");
    }

    function showPlayButton(button) {
        const play = getPlay(button);
        hideAllButtons(button);
        show(play);
        button.classList.remove("active");
    }

    function isPlaying(button) {
        const play = getPlay(button);
        return play.classList.contains("hide");
    }

    function pauseAllButtons() {
        let buttons = document.querySelectorAll(".playButton");
        for (let i = 0; i < buttons.length; i += 1) {
            if (isPlaying(buttons[i])) {
                showPlayButton(buttons[i]);
            }
        }
    }

    function showPauseButton(button) {
        const pause = getPause(button);
        pauseAllButtons();
        hideAllButtons(button);
        show(pause);
    }

    function getAudio() {
        return document.querySelector("audio");
    }

    function playAudio(player, src) {
        player.volume = 1.0;
        if (player.getAttribute("src") !== src) {
            player.setAttribute("src", src);
        }
        player.play();
    }

    function showButton(button, opts) {
        if (opts.playing) {
            showPlayButton(button);
        } else {
            showPauseButton(button);
        }
    }

    function pauseAudio(player) {
        player.pause();
    }

    function manageAudio(player, opts) {
        if (opts.playing) {
            pauseAudio(player);
        } else {
            playAudio(player, opts.src);
        }
    }

    function togglePlayButton(button) {
        const player = getAudio();
        const playing = isPlaying(button);
        showButton(button, {
            playing
        });
        manageAudio(player, {
            src: button.getAttribute("data-audio"),
            playing
        });
    }

    function playButtonClickHandler(evt) {
        const button = getButtonContainer(evt.target);
        togglePlayButton(button);
    }

    function initButton(selector) {
        const wrapper = document.querySelector(selector);
        wrapper.addEventListener("click", playButtonClickHandler);
    }
    initButton(".wrapf");
}());
</script>
</body>
</html>
2

It works perfectly fine set up like this in jsfiddle, but not an html page.

When I put it in notepad the YouTube stuff no-longer works.

Copy and paste this inside notepad and you’ll see.

None of the youtube stuff is working.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My HTML Document</title>
<style type="text/css">
    body {
        font-family: Arial, sans-serif;
    }
</style>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>
3

Hi,

You should learn how to use JS Fiddle correctly, i.e. HTML in the HTML pane, CSS in the CSS pane, etc. Makes debugging much easier.

You’ll have to be a bit more precise. I copy/pasted the code from the Fiddle and it works fine on my PC (i.e. all of the players work) .

Are you seeing any errors in the console?

2 Likes
4

When I click on the YouTube stuff these errors pop up.

I found the same issue being reported here.

file:///C:/Users/Desktop/test.html

SyntaxError: illegal character
player_api:1:1
if (!window['YT']) {var YT = {loading: 0,loaded: 0};}if (!window['YTConfig']) {var YTConfig = {'host': 'http://www.youtube.com'};}if (!YT.loading) {YT.loading = 1;(function(){var l = [];YT.ready = function(f) {if (YT.loaded) {f();} else {l.push(f);}};window.onYTReady = function() {YT.loaded = 1;for (var i = 0; i < l.length; i++) {try {l[i]();} catch (e) {}}};YT.setConfig = function(c) {for (var k in c) {if (c.hasOwnProperty(k)) {YTConfig[k] = c[k];}}};var a = document.createElement('script');a.type = 'text/javascript';a.id = 'www-widgetapi-script';a.src = 'https://s.ytimg.com/yts/jsbin/www-widgetapi-vfl_QvS8o/www-widgetapi.js';a.async = true;var c = document.currentScript;if (c) {var n = c.nonce || c.getAttribute('nonce');if (n) {a.setAttribute('nonce', n);}}var b = document.getElementsByTagName('script')[0];b.parentNode.insertBefore(a, b);})();}

Prettified

if (!window['YT']) {
    var YT = {
        loading: 0,
        loaded: 0
    };
}
if (!window['YTConfig']) {
    var YTConfig = {
        'host': 'http://www.youtube.com'
    };
}
if (!YT.loading) {
    YT.loading = 1;
    (function() {
        var l = [];
        YT.ready = function(f) {
            if (YT.loaded) {
                f();
            } else {
                l.push(f);
            }
        };
        window.onYTReady = function() {
            YT.loaded = 1;
            for (var i = 0; i < l.length; i++) {
                try {
                    l[i]();
                } catch (e) {}
            }
        };
        YT.setConfig = function(c) {
            for (var k in c) {
                if (c.hasOwnProperty(k)) {
                    YTConfig[k] = c[k];
                }
            }
        };
        var a = document.createElement('script');
        a.type = 'text/javascript';
        a.id = 'www-widgetapi-script';
        a.src = 'https:' + '//s.ytimg.com/yts/jsbin/www-widgetapi-vfl3zSWzk/www-widgetapi.js';
        a.async = true;
        var b = document.getElementsByTagName('script')[0];
        b.parentNode.insertBefore(a, b);
    })();
}

ReferenceError: YT is not defined
test.html:1610:13

    function init(video, settings) {
        load.js("https://www.youtube.com/player_api").then(function () {
            YT.ready(function () {
                addVideo(video, settings);
            });

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined?utm_source=mozilla&utm_medium=firefox-console-errors&utm_campaign=default

5

How would I resolve the issue.

This is the javascript I’m using.


const videoPlayer = (function makeVideoPlayer() {
    "use strict";
    const players = [];

    function onPlayerReady(event) {
        const player = event.target;
        player.setVolume(100); // percent
    }

    let hasShuffled = false;

    function onPlayerStateChange(event) {
        const player = event.target;
        if (!hasShuffled) {
            player.setShuffle(true);
            player.playVideoAt(0);
            hasShuffled = true;
        }
        if (event.data === YT.PlayerState.PLAYING) {
            for (let i = 0; i < players.length; i++) {
                if (players[i] !== event.target) players[i].pauseVideo();
            }
        }

        const playerVars = player.b.b.playerVars;
        if (playerVars.loop && event.data === YT.PlayerState.ENDED) {
            player.seekTo(playerVars.start);
        }
    }

    function addVideo(video, settings) {
        players.push(new YT.Player(video, Object.assign({
            videoId: video.dataset.id,
            host: "https://www.youtube-nocookie.com",
            events: {
                "onReady": onPlayerReady,
                "onStateChange": onPlayerStateChange
            }
        }, settings)));
    }

    function init(video, settings) {
        load.js("https://www.youtube.com/player_api").then(function () {
            YT.ready(function () {
                addVideo(video, settings);
            });
        });
    }
    return {
        init
    };
}());

function loadPlayer(opts) {
    "use strict";

    function show(el) {
        el.classList.remove("hide");
    }

    function initPlayer(wrapper) {
        const video = wrapper.querySelector(".video");
        opts.width = opts.width || 198;
        opts.height = opts.height || 198;
        opts.autoplay = 1;
        opts.controls = 1;
        opts.rel = 0;
        opts.iv_load_policy = 3;
        opts.fs = 0;
        opts.disablekb = 1;

        function paramInOpts(settings, param) {
            if (opts[param] !== undefined) {
                settings[param] = opts[param];
            }
            return settings;
        }
        const settingsParams = ["width", "height", "videoid", "host"];
        const settings = settingsParams.reduce(paramInOpts, {});
        const playerVarsParams = ["autoplay", "cc_load_policy",
            "controls", "disablekb", "end", "fs", "iv_load_policy",
            "list", "listType", "loop", "playlist", "rel", "start"
        ];
        settings.playerVars = playerVarsParams.reduce(paramInOpts, {});
        videoPlayer.init(video, settings);
    }

    function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.nextElementSibling;
        show(wrapper);
        initPlayer(wrapper);
    }
    const cover = document.querySelector(opts.target);
    cover.addEventListener("click", coverClickHandler);
}
const playlist = "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g";

loadPlayer({
    target: ".jacket-left",
    width: 424,
    height: 238
});
loadPlayer({
    target: ".jacket-right",
    width: 424,
    height: 238
});


loadPlayer({
    target: ".jacketc",
    width: 600,
    height: 338,
    loop: true,
    playlist
});
loadPlayer({
    target: ".alpha",
    start: 0,
    end: 280,
    loop: true
});
loadPlayer({
    target: ".beta",
    start: 0,
    end: 240,
    loop: true
});
loadPlayer({
    target: ".gamma",
    start: 0,
    end: 265,
    loop: true
});
loadPlayer({
    target: ".delta",
    start: 4,
    end: 254,
    loop: true
});
loadPlayer({
    target: ".epsilon",
    start: 0,
    end: 242,
    loop: true
});
loadPlayer({
    target: ".zeta",
    start: 0,
    end: 285,
    loop: true
});
loadPlayer({
    target: ".eta",
    start: 23,
    end: 312,
    loop: true
});
loadPlayer({
    target: ".theta",
    start: 2
});
loadPlayer({
    target: ".iota"
});
6

Start by stripping away extraneous code whilst being able to reproduce the error. When you have a minimal example that people can run to reproduce the error you are having, post it here. However, chances are you’ll stumble across the solution yourself in the process of doing the above.

4 Likes
7

I just removed everything except for the YouTube code.

The same errors are coming up in inspect inside an html page.

Html file

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My HTML Document</title>
<style type="text/css">
html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  background: #353198;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
}

.container {
  width: 990px;
  padding: 25px;
  overflow: hidden;
  margin: 100px auto;
  border-radius: 25px;
  border: 2px solid #0059dd;
  box-sizing: border-box;
  background: #000000;
}

.container-top {
  position: relative;
  height: 310px;
  margin: 0 0 45px 0;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/jEMIULl.jpg") no-repeat 0 0;
  background-size: cover;
}

.video-contain {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  float: left;
  margin-left: 25px;
  width: 277px;
  background: red;
  border-radius: 25px;
}

.jacket {
  position: relative;
  width: 80px;
  height: 80px;
  margin: auto;
  background: url("https://i.imgur.com/fzdYu8g.jpg") no-repeat 0 0;
  background-size: 100% 200%;
}

.jacket-middle {
  background-position: 0 -80px;
  background-size: 100% 200%;
}

.jacket-right {
  background-position: 0 -80px;
  background-size: 100% 200%;
}

.jacket .circle {
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  box-sizing: border-box;
  border: 1px solid #0059dd;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.5);
  transition: transform 0.1s ease 0s;
  box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px;
}

.jacket .play {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 38px;
  height: 22px;
  fill: #0059dd;
}

..jacket .circle:hover {
  border: 1px solid red;
  transform: scale(1.1);
}

.jacket .circle:hover .play {
  fill: red;
}

.wrap {
  position: relative;
  width: 277px;
  height: 207px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 25px;
}

.wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 277px;
  height: 207px;
  cursor: pointer;
}

.container-left {
  float: left;
  width: 606px;
  margin: 0;
}

.container-left .jacketc {
  position: relative;
  height: 344px;
  cursor: pointer;
  margin: 45px 0 0 0;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/gI9vM6E.jpg") no-repeat 0 0;
  background-size: cover;
}

.container-left .jacketc .play {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  fill: #fa33fc;
}

.container-left .jacketc .lines::before,
.container-left .jacketc .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.container-left .jacketc .lines::after {
  left: 399px;
}

.container-left .wrapg {
  position: relative;
  height: 344px;
  margin: 45px 0 0 0;
  cursor: pointer;
  overflow: hidden;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.container-left .wrapg iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 600px;
  height: 338px;
  cursor: pointer;
}

.container-left .wrapg .lines::before,
.container-left .wrapg .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.container-left .wrapg .lines::after {
  left: 399px;
}

.container-left .jacketd {
  position: relative;
  height: 606px;
  cursor: pointer;
  margin: 45px 0 0 0;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.container-left .jacketd,
.container-left .wraph {
  background: url("https://i.imgur.com/baApP9x.png") no-repeat 0 0;
  background-size: 100% 200%;
}

.container-left .jacketd .coversvg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  cursor: pointer;
}

.container-left .jacketd .coversvg path {
  fill: none;
  stroke: #08f9ff;
  stroke-miterlimit: 10;
  stroke-width: 4px;
}

.container-left .jacketd .lines::before,
.container-left .jacketd .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.container-left .jacketd .lines::after {
  left: 399px;
}

.container-left .wraph {
  position: relative;
  width: 606px;
  margin: 45px 0 0 0;
  overflow: hidden;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background-position: 0 -600px;
  background-size: 100% 200%;
}

.container-left .wraph .nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container-left .wraph .nav li {
  margin: 0;
  padding: 0;
  float: left;
}

.container-left .wraph .nav li {
  float: left;
  width: 198px;
  height: 198px;
  margin: 0 0 3px 0;
  background: rgba(0, 0, 0, 0.2);
}

.container-left .wraph .nav li:nth-of-type(3n+2) {
  margin: 0 3px 0 3px;
}

.container-left .wraph .nav li:nth-of-type(n+7) {
  margin-bottom: 0;
}

.container-left .wraph .nav li svg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  fill: transparent;
}

.container-left .wraph .nav li svg:hover path {
  fill: #0059dd;
}

.container-left .wraph .linesa::before,
.container-left .wraph .linesa::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.container-left .wraph .linesa::after {
  left: 399px;
}

.container-left .wraph .linesb::before,
.container-left .wraph .linesb::after {
  content: "";
  position: absolute;
  top: 198px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #0059dd;
}

.container-left .wraph .linesb::after {
  top: 399px;
}

.container-left .wraph .nav li iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 198px;
  height: 198px;
  cursor: pointer;
}

.container-left .wraph .nav li .alpha,
.playinga {
  margin: 0;
}

.container-left .wraph .nav li .beta,
.playingb {
  margin: 0 201px 0;
}

.container-left .wraph .nav li .gamma,
.playingc {
  margin: 0 402px 0;
}

.container-left .wraph .nav li .delta,
.playingd {
  margin: 201px 0 0;
}

.container-left .wraph .nav li .epsilon,
.playinge {
  margin: 201px 201px 0;
}

.container-left .wraph .nav li .zeta,
.playingf {
  margin: 201px 402px 0;
}

.container-left .wraph .nav li .eta,
.playingg {
  margin: 402px 0 0;
}

.container-left .wraph .nav li .theta,
.playingh {
  margin: 402px 201px 0;
}

.container-left .wraph .nav li .iota,
.playingi {
  margin: 402px 402px 0;
}

.hide {
  display: none;
}
</style>
</head>

<body>

<div class="outer">
  <div class="tcell">
    <audio></audio>
    <div class="container ">
      <div class="container-top">
        <div class="video-contain">
          <div class="jacket jacket-left">
            <div class="circle">
              <svg class="play" width="38" height="22" viewBox="0 0 26 26">
                <title>Play</title>
                <path d="M7.712 22.04a.732.732 0 0 1-.806.007.767.767 0 0 1-.406-.703V4.656c0-.31.135-.544.406-.703.271-.16.54-.157.806.006l14.458 8.332c.266.163.4.4.4.709 0 .31-.134.546-.4.71L7.712 22.04z" fill-rule="evenodd" />
              </svg>
            </div>
          </div>
          <div class="wrap hide">
            <div class="video" data-id="jMAShwisnQI"></div>
          </div>
        </div>
        <div class="video-contain">
          <div class="jacket jacket-middle">
            <div class="circle">
              <svg class="play" width="38" height="22" viewBox="0 0 26 26">
                <title>Play</title>
                <path d="M7.712 22.04a.732.732 0 0 1-.806.007.767.767 0 0 1-.406-.703V4.656c0-.31.135-.544.406-.703.271-.16.54-.157.806.006l14.458 8.332c.266.163.4.4.4.709 0 .31-.134.546-.4.71L7.712 22.04z" fill-rule="evenodd" />
              </svg>
            </div>
          </div>
          <div class="wrap hide">
            <div class="video" data-id="-SiGnAi845o"></div>
          </div>
        </div>
        <div class="video-contain">
          <div class="jacket jacket-right">
            <div class="circle">
              <svg class="play" width="38" height="22" viewBox="0 0 26 26">
                <title>Play</title>
                <path d="M7.712 22.04a.732.732 0 0 1-.806.007.767.767 0 0 1-.406-.703V4.656c0-.31.135-.544.406-.703.271-.16.54-.157.806.006l14.458 8.332c.266.163.4.4.4.709 0 .31-.134.546-.4.71L7.712 22.04z" fill-rule="evenodd" />
              </svg>
            </div>
          </div>
          <div class="wrap hide">
            <div class="video" data-id="-SiGnAi845o"></div>
          </div>
        </div>
      </div>
      <div class="container-left">
        <div class="jacketc">
          <svg class="play" width="600" height="338" viewbox="-3 -0.3 30 24.655">
            <title>Play</title>
            <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
            <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
          </svg>
          <div class="lines"></div>
        </div>
        <div class="wrapg hide">
          <div class="video" data-id="olhhsjFBpA4"></div>
          <div class="lines"></div>
        </div>
        <div class="jacketd" title="OPEN">
          <svg class="coversvg" width="198" height="198" viewBox="0 0 47.96 51.66">
            <title>Open</title>
            <path d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
          </svg>
          <div class="lines"></div>
        </div>
        <div class="hide wraph">
          <ul class="nav">
            <li>
              <svg class="alpha" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </svg>
              <div class="hide">
                <div class="video playinga" data-id="ZPz3wzPlruA"></div>
              </div>
            </li>
            <li>
              <svg class="beta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </svg>
              <div class="hide">
                <div class="video playingb" data-id="VFMtNOxpV3o"></div>
              </div>
            </li>
            <li>
              <svg class="gamma" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </svg>
              <div class="hide">
                <div class="video playingc" data-id="Zkf4EDjV1_g"></div>
              </div>
            </li>
            <li>
              <svg class="delta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </svg>
              <div class="hide">
                <div class="video playingd" data-id="-Xgi_way56U"></div>
              </div>
            </li>
            <li>
              <svg class="epsilon" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </svg>
              <div class="hide">
                <div class="video playinge" data-id="EK3h0IADYrQ"></div>
              </div>
            </li>
            <li>
              <svg class="zeta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </svg>
              <div class="hide">
                <div class="video playingf" data-id="YOw9J4K02H4"></div>
              </div>
            </li>
            <li>
              <svg class="eta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </svg>
              <div class="hide">
                <div class="video playingg" data-id="ID856YDIb6A"></div>
              </div>
            </li>
            <li>
              <svg class="theta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </svg>
              <div class="hide">
                <div class="video playingh" data-id="VRtMZDJdIIU"></div>
              </div>
            </li>
            <li>
              <svg class="iota" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </svg>
              <div class="hide">
                <div class="video playingi" data-id="qYEooPeyz5M"></div>
              </div>
            </li>
          </ul>
          <div class="linesa"></div>
          <div class="linesb"></div>
        </div>
      </div>
    </div>
  </div>
</div>


<script>
const load = (function makeLoad() {
    "use strict";

    function _load(tag) {
        return function (url) {
            return new Promise(function (resolve) {
                const element = document.createElement(tag);
                const parent = "body";
                const attr = "src";
                element.onload = function () {
                    resolve(url);
                };
                element[attr] = url;
                document[parent].appendChild(element);
            });
        };
    }
    return {
        js: _load("script")
    };
}());


(function manageCover() {
    "use strict";

    function show(el) {
        el.classList.remove("hide");
    }

    function hide(el) {
        el.classList.add("hide");
    }

    function coverClickHandler(evt) {
        const cover = evt.currentTarget;
        const thewrap = cover.parentNode.querySelector(".wraph");
        hide(cover);
        show(thewrap);
    }
    const cover = document.querySelector(".jacketd ");
    cover.addEventListener("click", coverClickHandler);
}());


const videoPlayer = (function makeVideoPlayer() {
    "use strict";
    const players = [];

    function onPlayerReady(event) {
        const player = event.target;
        player.setVolume(100); // percent
    }

    let hasShuffled = false;

    function onPlayerStateChange(event) {
        const player = event.target;
        if (!hasShuffled) {
            player.setShuffle(true);
            player.playVideoAt(0);
            hasShuffled = true;
        }
        if (event.data === YT.PlayerState.PLAYING) {
            for (let i = 0; i < players.length; i++) {
                if (players[i] !== event.target) players[i].pauseVideo();
            }
        }

        const playerVars = player.b.b.playerVars;
        if (playerVars.loop && event.data === YT.PlayerState.ENDED) {
            player.seekTo(playerVars.start);
        }
    }

    function addVideo(video, settings) {
        players.push(new YT.Player(video, Object.assign({
            videoId: video.dataset.id,
            host: "https://www.youtube-nocookie.com",
            events: {
                "onReady": onPlayerReady,
                "onStateChange": onPlayerStateChange
            }
        }, settings)));
    }

    function init(video, settings) {
        load.js("https://www.youtube.com/player_api").then(function () {
            YT.ready(function () {
                addVideo(video, settings);
            });
        });
    }
    return {
        init
    };
}());

function loadPlayer(opts) {
    "use strict";

    function show(el) {
        el.classList.remove("hide");
    }


    function initPlayer(wrapper) {
        const video = wrapper.querySelector(".video");
        opts.width = opts.width || 198;
        opts.height = opts.height || 198;
        opts.autoplay = 1;
        opts.controls = 1;
        opts.rel = 0;
        opts.iv_load_policy = 3;
        opts.fs = 0;
        opts.disablekb = 1;

        function paramInOpts(settings, param) {
            if (opts[param] !== undefined) {
                settings[param] = opts[param];
            }
            return settings;
        }
        const settingsParams = ["width", "height", "videoid", "host"];
        const settings = settingsParams.reduce(paramInOpts, {});
        const playerVarsParams = ["autoplay", "cc_load_policy",
            "controls", "disablekb", "end", "fs", "iv_load_policy",
            "list", "listType", "loop", "playlist", "rel", "start"
        ];
        settings.playerVars = playerVarsParams.reduce(paramInOpts, {});
        videoPlayer.init(video, settings);
    }

    function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.nextElementSibling;
        show(wrapper);
        initPlayer(wrapper);
        evt.currentTarget.classList.add("hide");
    }
    const cover = document.querySelector(opts.target);
    cover.addEventListener("click", coverClickHandler);
}
const playlist = "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g";

loadPlayer({
    target: ".jacket-left",
    width: 424,
    height: 238
});

loadPlayer({
    target: ".jacket-middle",
    width: 424,
    height: 238
});
loadPlayer({
    target: ".jacket-right",
    width: 424,
    height: 238
});
loadPlayer({
    target: ".jacketc",
    width: 600,
    height: 338,
    loop: true,
    playlist
});
loadPlayer({
    target: ".alpha",
    start: 0,
    end: 280,
    loop: true
});
loadPlayer({
    target: ".beta",
    start: 0,
    end: 240,
    loop: true
});
loadPlayer({
    target: ".gamma",
    start: 0,
    end: 265,
    loop: true
});
loadPlayer({
    target: ".delta",
    start: 4,
    end: 254,
    loop: true
});
loadPlayer({
    target: ".epsilon",
    start: 0,
    end: 242,
    loop: true
});
loadPlayer({
    target: ".zeta",
    start: 0,
    end: 285,
    loop: true
});
loadPlayer({
    target: ".eta",
    start: 23,
    end: 312,
    loop: true
});
loadPlayer({
    target: ".theta",
    start: 2
});
loadPlayer({
    target: ".iota"
});
</script>
</body>
</html>
8

Sorry bud, 800 lines of code does not constitute a minimal example. If you can reduce that to a sensible size, I’ll be happy to take a look, otherwise good luck solving your error.

2 Likes
9

Just this part.

const load = (function makeLoad() {
    "use strict";

    function _load(tag) {
        return function (url) {
            return new Promise(function (resolve) {
                const element = document.createElement(tag);
                const parent = "body";
                const attr = "src";
                element.onload = function () {
                    resolve(url);
                };
                element[attr] = url;
                document[parent].appendChild(element);
            });
        };
    }
    return {
        js: _load("script")
    };
}());


const videoPlayer = (function makeVideoPlayer() {
    "use strict";
    const players = [];

    function onPlayerReady(event) {
        const player = event.target;
        player.setVolume(100); // percent
    }

    let hasShuffled = false;

    function onPlayerStateChange(event) {
        const player = event.target;
        if (!hasShuffled) {
            player.setShuffle(true);
            player.playVideoAt(0);
            hasShuffled = true;
        }
        if (event.data === YT.PlayerState.PLAYING) {
            for (let i = 0; i < players.length; i++) {
                if (players[i] !== event.target) players[i].pauseVideo();
            }
        }

        const playerVars = player.b.b.playerVars;
        if (playerVars.loop && event.data === YT.PlayerState.ENDED) {
            player.seekTo(playerVars.start);
        }
    }

    function addVideo(video, settings) {
        players.push(new YT.Player(video, Object.assign({
            videoId: video.dataset.id,
            host: "https://www.youtube-nocookie.com",
            events: {
                "onReady": onPlayerReady,
                "onStateChange": onPlayerStateChange
            }
        }, settings)));
    }

    function init(video, settings) {
        load.js("https://www.youtube.com/player_api").then(function () {
            YT.ready(function () {
                addVideo(video, settings);
            });
        });
    }
    return {
        init
    };
}());

More Specifically:

    function addVideo(video, settings) {
        players.push(new YT.Player(video, Object.assign({
            videoId: video.dataset.id,
            host: "https://www.youtube-nocookie.com",
            events: {
                "onReady": onPlayerReady,
                "onStateChange": onPlayerStateChange
            }
        }, settings)));
    }

    function init(video, settings) {
        load.js("https://www.youtube.com/player_api").then(function () {
            YT.ready(function () {
                addVideo(video, settings);
            });
        });
    }
    return {
        init
    };
}());
10

So make an example that demonstrates your problem, that I can run…

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      /* Minimal styling if absolutely necessary */
    </style>
  </head>
  <body>
    <-- Minimal HTML to reproduce error -->

    <-- Links to libraries on CDNs -->
    <script>
      // Minimal JS to reproduce error
    </script>
  </body>
</html>
´´´
11

I did that here:

All you do is, while inside dev tools inside an html page try clicking on one of the videos and the error comes up.

None of the videos play.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My HTML Document</title>
<style type="text/css">
html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  background: #353198;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
}

.container {
  width: 990px;
  padding: 25px;
  overflow: hidden;
  margin: 100px auto;
  border-radius: 25px;
  border: 2px solid #0059dd;
  box-sizing: border-box;
  background: #000000;
}

.container-top {
  position: relative;
  height: 310px;
  margin: 0 0 45px 0;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/jEMIULl.jpg") no-repeat 0 0;
  background-size: cover;
}

.video-contain {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  float: left;
  margin-left: 25px;
  width: 277px;
  background: red;
  border-radius: 25px;
}

.jacket {
  position: relative;
  width: 80px;
  height: 80px;
  margin: auto;
  background: url("https://i.imgur.com/fzdYu8g.jpg") no-repeat 0 0;
  background-size: 100% 200%;
}

.jacket-middle {
  background-position: 0 -80px;
  background-size: 100% 200%;
}

.jacket-right {
  background-position: 0 -80px;
  background-size: 100% 200%;
}

.jacket .circle {
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  box-sizing: border-box;
  border: 1px solid #0059dd;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.5);
  transition: transform 0.1s ease 0s;
  box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px;
}

.jacket .play {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 38px;
  height: 22px;
  fill: #0059dd;
}

..jacket .circle:hover {
  border: 1px solid red;
  transform: scale(1.1);
}

.jacket .circle:hover .play {
  fill: red;
}

.wrap {
  position: relative;
  width: 277px;
  height: 207px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 25px;
}

.wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 277px;
  height: 207px;
  cursor: pointer;
}

.container-left {
  float: left;
  width: 606px;
  margin: 0;
}

.container-left .jacketc {
  position: relative;
  height: 344px;
  cursor: pointer;
  margin: 45px 0 0 0;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/gI9vM6E.jpg") no-repeat 0 0;
  background-size: cover;
}

.container-left .jacketc .play {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  fill: #fa33fc;
}

.container-left .jacketc .lines::before,
.container-left .jacketc .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.container-left .jacketc .lines::after {
  left: 399px;
}

.container-left .wrapg {
  position: relative;
  height: 344px;
  margin: 45px 0 0 0;
  cursor: pointer;
  overflow: hidden;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.container-left .wrapg iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 600px;
  height: 338px;
  cursor: pointer;
}

.container-left .wrapg .lines::before,
.container-left .wrapg .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.container-left .wrapg .lines::after {
  left: 399px;
}

.container-left .jacketd {
  position: relative;
  height: 606px;
  cursor: pointer;
  margin: 45px 0 0 0;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.container-left .jacketd,
.container-left .wraph {
  background: url("https://i.imgur.com/baApP9x.png") no-repeat 0 0;
  background-size: 100% 200%;
}

.container-left .jacketd .coversvg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  cursor: pointer;
}

.container-left .jacketd .coversvg path {
  fill: none;
  stroke: #08f9ff;
  stroke-miterlimit: 10;
  stroke-width: 4px;
}

.container-left .jacketd .lines::before,
.container-left .jacketd .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.container-left .jacketd .lines::after {
  left: 399px;
}

.container-left .wraph {
  position: relative;
  width: 606px;
  margin: 45px 0 0 0;
  overflow: hidden;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background-position: 0 -600px;
  background-size: 100% 200%;
}

.container-left .wraph .nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container-left .wraph .nav li {
  margin: 0;
  padding: 0;
  float: left;
}

.container-left .wraph .nav li {
  float: left;
  width: 198px;
  height: 198px;
  margin: 0 0 3px 0;
  background: rgba(0, 0, 0, 0.2);
}

.container-left .wraph .nav li:nth-of-type(3n+2) {
  margin: 0 3px 0 3px;
}

.container-left .wraph .nav li:nth-of-type(n+7) {
  margin-bottom: 0;
}

.container-left .wraph .nav li svg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  fill: transparent;
}

.container-left .wraph .nav li svg:hover path {
  fill: #0059dd;
}

.container-left .wraph .linesa::before,
.container-left .wraph .linesa::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.container-left .wraph .linesa::after {
  left: 399px;
}

.container-left .wraph .linesb::before,
.container-left .wraph .linesb::after {
  content: "";
  position: absolute;
  top: 198px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #0059dd;
}

.container-left .wraph .linesb::after {
  top: 399px;
}

.container-left .wraph .nav li iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 198px;
  height: 198px;
  cursor: pointer;
}

.container-left .wraph .nav li .alpha,
.playinga {
  margin: 0;
}

.container-left .wraph .nav li .beta,
.playingb {
  margin: 0 201px 0;
}

.container-left .wraph .nav li .gamma,
.playingc {
  margin: 0 402px 0;
}

.container-left .wraph .nav li .delta,
.playingd {
  margin: 201px 0 0;
}

.container-left .wraph .nav li .epsilon,
.playinge {
  margin: 201px 201px 0;
}

.container-left .wraph .nav li .zeta,
.playingf {
  margin: 201px 402px 0;
}

.container-left .wraph .nav li .eta,
.playingg {
  margin: 402px 0 0;
}

.container-left .wraph .nav li .theta,
.playingh {
  margin: 402px 201px 0;
}

.container-left .wraph .nav li .iota,
.playingi {
  margin: 402px 402px 0;
}

.hide {
  display: none;
}
</style>
</head>

<body>

<div class="outer">
  <div class="tcell">
    <audio></audio>
    <div class="container ">
      <div class="container-top">
        <div class="video-contain">
          <div class="jacket jacket-left">
            <div class="circle">
              <svg class="play" width="38" height="22" viewBox="0 0 26 26">
                <title>Play</title>
                <path d="M7.712 22.04a.732.732 0 0 1-.806.007.767.767 0 0 1-.406-.703V4.656c0-.31.135-.544.406-.703.271-.16.54-.157.806.006l14.458 8.332c.266.163.4.4.4.709 0 .31-.134.546-.4.71L7.712 22.04z" fill-rule="evenodd" />
              </svg>
            </div>
          </div>
          <div class="wrap hide">
            <div class="video" data-id="jMAShwisnQI"></div>
          </div>
        </div>
        <div class="video-contain">
          <div class="jacket jacket-middle">
            <div class="circle">
              <svg class="play" width="38" height="22" viewBox="0 0 26 26">
                <title>Play</title>
                <path d="M7.712 22.04a.732.732 0 0 1-.806.007.767.767 0 0 1-.406-.703V4.656c0-.31.135-.544.406-.703.271-.16.54-.157.806.006l14.458 8.332c.266.163.4.4.4.709 0 .31-.134.546-.4.71L7.712 22.04z" fill-rule="evenodd" />
              </svg>
            </div>
          </div>
          <div class="wrap hide">
            <div class="video" data-id="-SiGnAi845o"></div>
          </div>
        </div>
        <div class="video-contain">
          <div class="jacket jacket-right">
            <div class="circle">
              <svg class="play" width="38" height="22" viewBox="0 0 26 26">
                <title>Play</title>
                <path d="M7.712 22.04a.732.732 0 0 1-.806.007.767.767 0 0 1-.406-.703V4.656c0-.31.135-.544.406-.703.271-.16.54-.157.806.006l14.458 8.332c.266.163.4.4.4.709 0 .31-.134.546-.4.71L7.712 22.04z" fill-rule="evenodd" />
              </svg>
            </div>
          </div>
          <div class="wrap hide">
            <div class="video" data-id="-SiGnAi845o"></div>
          </div>
        </div>
      </div>
      <div class="container-left">
        <div class="jacketc">
          <svg class="play" width="600" height="338" viewbox="-3 -0.3 30 24.655">
            <title>Play</title>
            <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
            <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
          </svg>
          <div class="lines"></div>
        </div>
        <div class="wrapg hide">
          <div class="video" data-id="olhhsjFBpA4"></div>
          <div class="lines"></div>
        </div>
        <div class="jacketd" title="OPEN">
          <svg class="coversvg" width="198" height="198" viewBox="0 0 47.96 51.66">
            <title>Open</title>
            <path d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
          </svg>
          <div class="lines"></div>
        </div>
        <div class="hide wraph">
          <ul class="nav">
            <li>
              <svg class="alpha" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </svg>
              <div class="hide">
                <div class="video playinga" data-id="ZPz3wzPlruA"></div>
              </div>
            </li>
            <li>
              <svg class="beta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </svg>
              <div class="hide">
                <div class="video playingb" data-id="VFMtNOxpV3o"></div>
              </div>
            </li>
            <li>
              <svg class="gamma" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </svg>
              <div class="hide">
                <div class="video playingc" data-id="Zkf4EDjV1_g"></div>
              </div>
            </li>
            <li>
              <svg class="delta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </svg>
              <div class="hide">
                <div class="video playingd" data-id="-Xgi_way56U"></div>
              </div>
            </li>
            <li>
              <svg class="epsilon" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </svg>
              <div class="hide">
                <div class="video playinge" data-id="EK3h0IADYrQ"></div>
              </div>
            </li>
            <li>
              <svg class="zeta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </svg>
              <div class="hide">
                <div class="video playingf" data-id="YOw9J4K02H4"></div>
              </div>
            </li>
            <li>
              <svg class="eta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </svg>
              <div class="hide">
                <div class="video playingg" data-id="ID856YDIb6A"></div>
              </div>
            </li>
            <li>
              <svg class="theta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </svg>
              <div class="hide">
                <div class="video playingh" data-id="VRtMZDJdIIU"></div>
              </div>
            </li>
            <li>
              <svg class="iota" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </svg>
              <div class="hide">
                <div class="video playingi" data-id="qYEooPeyz5M"></div>
              </div>
            </li>
          </ul>
          <div class="linesa"></div>
          <div class="linesb"></div>
        </div>
      </div>
    </div>
  </div>
</div>


<script>
const load = (function makeLoad() {
    "use strict";

    function _load(tag) {
        return function (url) {
            return new Promise(function (resolve) {
                const element = document.createElement(tag);
                const parent = "body";
                const attr = "src";
                element.onload = function () {
                    resolve(url);
                };
                element[attr] = url;
                document[parent].appendChild(element);
            });
        };
    }
    return {
        js: _load("script")
    };
}());


(function manageCover() {
    "use strict";

    function show(el) {
        el.classList.remove("hide");
    }

    function hide(el) {
        el.classList.add("hide");
    }

    function coverClickHandler(evt) {
        const cover = evt.currentTarget;
        const thewrap = cover.parentNode.querySelector(".wraph");
        hide(cover);
        show(thewrap);
    }
    const cover = document.querySelector(".jacketd ");
    cover.addEventListener("click", coverClickHandler);
}());


const videoPlayer = (function makeVideoPlayer() {
    "use strict";
    const players = [];

    function onPlayerReady(event) {
        const player = event.target;
        player.setVolume(100); // percent
    }

    let hasShuffled = false;

    function onPlayerStateChange(event) {
        const player = event.target;
        if (!hasShuffled) {
            player.setShuffle(true);
            player.playVideoAt(0);
            hasShuffled = true;
        }
        if (event.data === YT.PlayerState.PLAYING) {
            for (let i = 0; i < players.length; i++) {
                if (players[i] !== event.target) players[i].pauseVideo();
            }
        }

        const playerVars = player.b.b.playerVars;
        if (playerVars.loop && event.data === YT.PlayerState.ENDED) {
            player.seekTo(playerVars.start);
        }
    }

    function addVideo(video, settings) {
        players.push(new YT.Player(video, Object.assign({
            videoId: video.dataset.id,
            host: "https://www.youtube-nocookie.com",
            events: {
                "onReady": onPlayerReady,
                "onStateChange": onPlayerStateChange
            }
        }, settings)));
    }

    function init(video, settings) {
        load.js("https://www.youtube.com/player_api").then(function () {
            YT.ready(function () {
                addVideo(video, settings);
            });
        });
    }
    return {
        init
    };
}());

function loadPlayer(opts) {
    "use strict";

    function show(el) {
        el.classList.remove("hide");
    }


    function initPlayer(wrapper) {
        const video = wrapper.querySelector(".video");
        opts.width = opts.width || 198;
        opts.height = opts.height || 198;
        opts.autoplay = 1;
        opts.controls = 1;
        opts.rel = 0;
        opts.iv_load_policy = 3;
        opts.fs = 0;
        opts.disablekb = 1;

        function paramInOpts(settings, param) {
            if (opts[param] !== undefined) {
                settings[param] = opts[param];
            }
            return settings;
        }
        const settingsParams = ["width", "height", "videoid", "host"];
        const settings = settingsParams.reduce(paramInOpts, {});
        const playerVarsParams = ["autoplay", "cc_load_policy",
            "controls", "disablekb", "end", "fs", "iv_load_policy",
            "list", "listType", "loop", "playlist", "rel", "start"
        ];
        settings.playerVars = playerVarsParams.reduce(paramInOpts, {});
        videoPlayer.init(video, settings);
    }

    function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.nextElementSibling;
        show(wrapper);
        initPlayer(wrapper);
        evt.currentTarget.classList.add("hide");
    }
    const cover = document.querySelector(opts.target);
    cover.addEventListener("click", coverClickHandler);
}
const playlist = "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g";

loadPlayer({
    target: ".jacket-left",
    width: 424,
    height: 238
});

loadPlayer({
    target: ".jacket-middle",
    width: 424,
    height: 238
});
loadPlayer({
    target: ".jacket-right",
    width: 424,
    height: 238
});
loadPlayer({
    target: ".jacketc",
    width: 600,
    height: 338,
    loop: true,
    playlist
});
loadPlayer({
    target: ".alpha",
    start: 0,
    end: 280,
    loop: true
});
loadPlayer({
    target: ".beta",
    start: 0,
    end: 240,
    loop: true
});
loadPlayer({
    target: ".gamma",
    start: 0,
    end: 265,
    loop: true
});
loadPlayer({
    target: ".delta",
    start: 4,
    end: 254,
    loop: true
});
loadPlayer({
    target: ".epsilon",
    start: 0,
    end: 242,
    loop: true
});
loadPlayer({
    target: ".zeta",
    start: 0,
    end: 285,
    loop: true
});
loadPlayer({
    target: ".eta",
    start: 23,
    end: 312,
    loop: true
});
loadPlayer({
    target: ".theta",
    start: 2
});
loadPlayer({
    target: ".iota"
});
</script>
</body>
</html>
12

No you didn’t.

That’s it. I’m out. Good luck.

1 Like
13

The code can’t be broken down further than that.

15

I have uploaded the source code and it now has its own web page (on a surplus web-site). It is now far easier to validate using free online tools. Perhaps you could solve the problem of having two videos playing at the same time.

https://alibaba-test.tk/sp-unzip/_crud.php?zipname=asasass-002.zip

[off-topic]
Have you not got your own web site up and running yet? There are quite a few that are even free and it is far better to debug problems on an actual site rather than use jsFiddle.

I get the impression that jsFiddle is not an ideal site for solving problems. Any further thoughts?
[off-topic]

2 Likes
16

JS Fiddle is amazing for short, self-contained examples. However, I agree that it’s not a great place to drop 800+ lines of code.

1 Like
17

GitHub pages is showing 0 errors.

This is the only thing that comes up on GitHub that I have no control pver.

And there are 0 jslint errors in the javascript.

I made two versions. One that uses for loop and the other that uses forEach

Also, GitHub pages uses a style sheet where it’s a more cleaner setup.
<link rel="stylesheet" type="text/css" href="styles.css" media="screen">
<script type="text/javascript" src="script.js"></script>

18

So does it work, or does it not work?

Why are you telling us this?

19

No, not for me in a stand alone html page.
file:///C:/Users//Desktop/mu.html

All the YouTube api stuff doesn’t work.

20

In that case, you still need to follow the instructions to post a minimal example, as explained in post 10.

1 Like
21

Although the link I supplied in post #15 has a zip filename in the passed parameter, the link actually expands the zip filename and opens a standalone html web page.

All the videos in the uploaded web page work and as mentioned, some can even play simultaneously resulting in a cacophony of sound!

[off-topic]
In another section of the site a zip can be uploaded, stored and expanded on demand which IMHO is far better than uploading a zip file.
[/off-topic]