Trying to remove delay

I hope someone can help with this.

I'm not looking for an answer from a reputable source, I clicked on the wrong option. I never used bounty before.

If you are able to solve the bounty you will get the 50.

Sorry for the confusion.

The YouTube video (aka iframe) doesn't get created until after createPlayer(args) is called on line 140. Since it is part of the click handler that means it gets created after the click. There is a delay happening as the video is fetched and loaded.

How would this be fixed in the code so that there is not a delay?

To Reproduce: Click Run, then the play image, do it repeatedly to see the delay.

After clicking the the play image, it doesn't go straight to the video, there's a delay that occurs that can be clearly seen.

How would I remove that delay?

Click Run, not update to test jsitor code: https://jsitor.com/W0Iu1msGS

You can make edits to the jsfiddle link: https://jsfiddle.net/w2Lphczf/

The delay appears in both.

    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 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: {
        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,
    width: 277
  });
  managePlayer.add("svg.playb", {
    height: 207,
    width: 277
  });
  manageCover.init({
    container: ".container",
    playButton: ".thePlay"
  });
}

from Trying to remove delay