Youtube embedded iframe multiple events conflicting with onClick - play / mute function not working correctly

Question

Having issues with getting the js working correctly here.

Click Function is conflicting with the following mute/unmute function. "Play Video" works on second click? Unmute function is also not working?

I can work through some basic js problem solving, but I am very much a beginner still.

This is based on Fullscreen background video - YouTube Player API

Forked here https://codepen.io/linbaird/pen/jOvBZdz

GOAL - fade out of image slides > Play Video > fade back to image slides after video finishes. Controls options to unmute/ and option to loop video.

NOTES: Consider preloading video that will not slow down the website? Or is embedded video not a problem with load times?

    onReady: function (e) {
      e.target.mute();
      // e.target.setLoop(true);
      $("#play-video").on("click", function () {
        e.target.playVideo(); //mute function seems to be causing error here? Need to click 'Play' twice?
        e.target.setLoop(true); //not working???
      });

      $("#mute-unmute").on("click", function () {
        $(this).toggleClass("muted");
        $(this).toggleClass("unmuted");
        // Need mute/unmute event here??? Not sure how to do this?
      });
      var hasBeenClicked = false;
      jQuery("#mute-unmute").click(function () {
        hasBeenClicked = true;
      });

      if (hasBeenClicked) {
        // The link has been clicked.
      } else {
        // The link has not been clicked.
      }
    }