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

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.      }    }