YouTube not playing after image click

I’m trying to have the video play after clicking on the Blue play.

Right now only the red play is working, meaning, after clicking on the red play, the video starts playing.

How do I get the video to the Blue play to start playing after it is clicked, the same way as it works with the red?

To Reproduce Issue, click on the Blue play and you will see the video doesn’t start playing.

These are the play images that are clicked, then a video appears.

enter image description here

How would I be able to have the video to the Blue play start playing after it is clicked?

I have tried different things and haven’t been able to have the video to the Blue play start playing after it is clicked.

I tried doing it each of these ways and those didn’t work.

const cover = document.querySelectorAll(".playa, .playb");

const cover = document.querySelectorAll(".thePlay");

Does anyone know how I can get the video to play after the Blue play is clicked?

What needs to be adjusted in the code for it to be working?

Click Run, not update to test code.

https://jsitor.com/s8E34OBRMK

  function play() {
    player.playVideo();
  }
  return {
    addPlayer,
    play
  };
}());

function onYouTubeIframeAPIReady() {
  const cover = document.querySelectorAll(".playa");
  cover.forEach(function (cover) {
    const wrapper = cover.nextElementSibling;
    const frameContainer = wrapper.querySelector(".video");
    videoPlayer.addPlayer(frameContainer);

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

(function initCover() {

  function coverClickHandler() {
    videoPlayer.play();
  }

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

Full YouTube Code

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);
  }

  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));
  }

  function play() {
    player.playVideo();
  }
  return {
    addPlayer,
    play
  };
}());

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() {
  const cover = document.querySelectorAll(".playa");
  cover.forEach(function (cover) {
    const wrapper = cover.nextElementSibling;
    const frameContainer = wrapper.querySelector(".video");
    videoPlayer.addPlayer(frameContainer);

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

(function initCover() {

  function coverClickHandler() {
    videoPlayer.play();
  }

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

Answer

You can simply add autoplay: 1 in playerVars which is inside the makeManagePlayer and it will autoplay the video after clicking on the blue button. Took the reference from here (see https://developers.google.com/youtube/player_parameters?csw=1#autoplay)