Debugging onYouTubeIframeAPIReady

[asasass]

When you click on the Red play, the video from the Blue play starts playing.

Sometimes no video is playing, and you can hear the video from the Blue play, or the other way around.

How it should work

After clicking on the Red play, the video to the red starts playing right away.

After clicking on the Blue play, the video to the blue starts playing right away.

How would I be able to get this to work properly?

I am having difficulty trying to figure this out.

When testing the JSitor codes, Click Run not update

To reproduce issue, click either the Red play or the Blue play.

Click Run to reset then do it again.

1st Attempt https://jsitor.com/4C2KipqHmJ

https://jsfiddle.net/e5at9dxr/

function onYouTubeIframeAPIReady() {
  const cover = document.querySelectorAll(".playa, .playb");console.log(cover);
  cover.forEach(function (cover) {
    const wrapper = cover.parentElement;
    const frameContainer = wrapper.querySelector(".video");
    videoPlayer.addPlayer(frameContainer);

  const covers = document.querySelectorAll(".thePlay");
  covers.forEach(function (cover) {
    cover.addEventListener("click", coverClickHandler);
  });
}());

2nd Attempt https://jsitor.com/YI3Onmxzd

https://jsfiddle.net/pahL5o0k/

function onYouTubeIframeAPIReady() {
  const cover = document.querySelectorAll(".playa, .playb");console.log(cover);
  cover.forEach(function (cover) {
    const wrapper = cover.parentElement;
    const frameContainer = wrapper.querySelector(".video");
    videoPlayer.addPlayer(frameContainer);

  const covers = document.querySelectorAll("svg.playa, svg.playb");
  covers.forEach(function (cover) {
    cover.addEventListener("click", coverClickHandler);
  });
}());

html

<div class="outer">
    <div class="container with-curtain">
        <svg class="playa thePlay" width="100%" height="100%" viewBox="0 0 64 64">
            <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
      M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
        </svg>
        <div class="inner-container curtain curtain1">
            <div class="ratio-keeper">
                <div class="wrapa">
                    <div class="video video-frame" data-id="qe5WF4qCSkQ"></div>
                </div>
                <div class="panel-left"></div>
                <div class="panel-right"></div>
            </div>
        </div>
    </div>

    <div class="container with-curtain">
        <svg class="playb thePlay " width="100%" height="100%" viewBox="0 0 64 64">
            <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
      M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
        </svg>
        <div class="inner-container curtain curtain2">
            <div class="ratio-keeper">
                <div class="wrapa">
                    <div class="video video-frame" data-id="2VwsvrPFr9w"></div>
                </div>
                <div class="panel-left"></div>
                <div class="panel-right"></div>
            </div>
        </div>
    </div>
</div>

[asasass]

I was just told this:

Your problem lies here
Think about what this does:

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

and what player will be once both videos are ready
and what that means for:

  function play() {
    player.playVideo();
  }

player is never swapped to the player represented by the play button
it’s always the last one that initialized
it’s also not safe to assume the players will always be ready in the same order
and… unless you intend to let multiple videos play at once, you probably don’t need two

[asasass]

Updated Code: How does that Look?

No jslint errors
https://jsitor.com/OnDaeEcxa

https://jsfiddle.net/x6t03uqc/

const manageCover = (function makeManageCover() {
    const config = {};

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

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

    function hideAll(elements) {
        elements.forEach(hide);
    }

    function showCovers(playButton) {
        const cover = playButton.parentElement;
        cover.classList.add("active");
        show(cover);
    }

    function coverClickHandler(evt) {
        hideAll(config.containers);
        const cover = evt.currentTarget;
        showCovers(cover);
    }

    function addClickToButtons(playButtons) {
        playButtons.forEach(function addEventHandler(playButton) {
            playButton.addEventListener("click", coverClickHandler);
        });
    }

    function addCoverHandler(coverSelector, handler) {
        const cover = document.querySelector(coverSelector);
        cover.addEventListener("click", handler);
    }

    function init(selectors) {
        config.containers = document.querySelectorAll(selectors.container);
        const playButtons = document.querySelectorAll(selectors.playButton);
        addClickToButtons(playButtons);
    }

    return {
        addCoverHandler,
        init,
        show
    };
}());

const videoPlayer = (function makeVideoPlayer() {
    const players = [];
    let player = null;


    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/player_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


    function onPlayerReady(event) {
        player = event.target;
        player.setVolume(100);
        player.playVideo();
    }

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

    return {
        addPlayer

    };
}());

const managePlayer = (function makeManagePlayer() {
    const defaults = {
        playerOptions: {
            height: 600,
            playerVars: {
                autoplay: 0,
                controls: 1,
                disablekb: 1,
                enablejsapi: 1,
                fs: 0,
                iv_load_policy: 3,
                rel: 0
            },
            width: 360
        }
    };

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

    function createPlayerOptions(settings) {
        function paramInOptions(opts, param) {
            if (settings[param] !== undefined) {
                opts[param] = settings[param];
                delete settings[param];
            }
            return opts;
        }

        const optionParams = ["width", "height", "videoid", "host"];
        const defaultOptions = defaults.playerOptions;
        const preferred = optionParams.reduce(paramInOptions, {});
        const playerOptions = Object.assign({}, defaultOptions, preferred);
        // settings should now only consist of playerVars
        const defaultPlayerVars = defaultOptions.playerVars;
        const playerVars = Object.assign({}, defaultPlayerVars, settings);
        playerOptions.playerVars = playerVars;
        return playerOptions;
    }

    function createPlayer(videoWrapper, settings = {}) {
        const video = videoWrapper.querySelector(".video");
        const playerOptions = createPlayerOptions(settings);
        return videoPlayer.addPlayer(video, playerOptions);
    }

    function createCoverClickHandler(playerSettings) {
        return function coverClickHandler(evt) {
            const cover = evt.currentTarget;
            const wrapper = cover.nextElementSibling;
            show(wrapper);
            const player = createPlayer(wrapper, playerSettings);
            wrapper.player = player;
        };
    }

    function addPlayer(coverSelector, playerSettings) {
        const clickHandler = createCoverClickHandler(playerSettings);
        manageCover.addCoverHandler(coverSelector, clickHandler);
    }

    function init(playerOptions) {
        Object.assign(defaults.playerOptions, playerOptions);
    }

    return {
        add: addPlayer,
        init
    };
}());

function onYouTubeIframeAPIReady() {
    managePlayer.add("svg.playa", {
        height: 207,
        start: 4,
        width: 277
    });
    managePlayer.add("svg.playb", {
        height: 207,
        width: 277
    });
    manageCover.init({
        container: ".container",
        playButton: ".thePlay"
    });
}