How to add pointer-events: none; to the svg play button after it is clicked?

Question

After the SVG play button is clicked, the cursor should stay as default.

How would that be fixed in the code so that pointer-events: none; is added to the SVG play button after it is clicked?

If I am understanding what the issue is, I might not be. I know that, after clicking on the exit button, the cursor stays on default after it is clicked.

I'm trying to do the same thing with the SVG play button. https://jsfiddle.net/tgs9p8hk/ In both the snippet and fiddle I provided you can see that after the SVG play button is clicked, the cursor does not stay as default, it changes back to pointer.

This allows for a 2nd button to be clicked before the buttons fade out completely.

How is that fixed in the code?

const manageCover = (function makeManageCover() {
  const config = {};
  const body = document.body;
  var originalEvent = "";

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

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

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

  function resetBackground(backgroundSelector) {
    const allBackgrounds = document.querySelectorAll(backgroundSelector);

    function hideBackground(background) {
      background.classList.add("bg1");
    }
    allBackgrounds.forEach(hideBackground);
  }

  function resetButtons(buttonSelector) {
    const allButtons = document.querySelectorAll(buttonSelector);

    function hideButton(button) {
      button.classList.add("isOpen");
    }
    allButtons.forEach(hideButton);
  }

  function resetPage() {
    resetBackground("body");
    resetButtons(".outer");
  }

  function markAsPlayed(played) {
    played.classList.add("played");
  }

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

  function animationEndHandler2(evt) {

    const animationName = evt.animationName;

    if (animationName === "initial-fade") {
      coverClickHandlerContinue(originalEvent);
    }
  }

  function coverClickHandlerContinue(originalEvent) {
    body.classList.remove("initial-fade");
    hideAll(config.containers);
    resetPage();
    markAsPlayed(originalEvent);
    const cover = originalEvent;
    showCovers(cover);
  }

  function coverClickHandler(evt) {
    originalEvent = evt.currentTarget;
    body.classList.add("initial-fade");
  }

  function addClickToButtons(playButtons) {
    playButtons.forEach(function playButtonHandler(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);
    body.addEventListener("animationend", animationEndHandler2);
  }

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

const manageUI = (function makeManageUI() {
  const body = document.body;

  function resetBackground(backgroundSelector) {
    const allBackgrounds = document.querySelectorAll(backgroundSelector);

    function showBackground(background) {
      background.classList.remove("bg1");
    }
    allBackgrounds.forEach(showBackground);
  }

  function resetCurtains(curtainSelector) {
    const allCurtains = document.querySelectorAll(curtainSelector);

    function showCurtain(curtain) {
      curtain.classList.remove("active");
    }
    allCurtains.forEach(showCurtain);
  }

  function showAllButtons(buttonSelector) {
    const allButtons = document.querySelectorAll(buttonSelector);

    function showButton(button) {
      button.classList.remove("hide");
    }
    allButtons.forEach(showButton);
  }

  function resetButtons(buttonSelector) {
    const allButtons = document.querySelectorAll(buttonSelector);

    function showButton(button) {
      button.classList.remove("isOpen");
    }
    allButtons.forEach(showButton);
  }

  function animationEndHandler(evt) {

    const animationName = evt.animationName;

    if (animationName === "fadingOut") {
      fadeReset();
    }
  }

  function fadeReset() {
    body.classList.remove("fadingOut");
    resetBackground("body");
    resetCurtains(".with-curtain");
    showAllButtons(".hide");
    resetButtons(".outer");
  }

  function resetPage() {
    body.classList.add("fadingOut");
  }

  function exitClickHandler() {
    resetPage();
  }

  function addClickToExit(exitButtons) {
    exitButtons.forEach(function addExitButtonHandler(exitButtons) {
      exitButtons.addEventListener("click", exitClickHandler);
    });
  }

  function addExitHandlers(callback) {
    const resetVideo = document.querySelectorAll(".exit");
    resetVideo.forEach(function resetVideoHandler(video) {
      video.addEventListener("click", callback);
    });
  }

  function init() {
    const exitButtons = document.querySelectorAll(".exit");
    addClickToExit(exitButtons);
    body.addEventListener("animationend", animationEndHandler);
  }

  return {
    addExitHandlers,
    init
  };
}());

const videoPlayer = (function makeVideoPlayer() {

  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) {
    const player = event.target;
    player.setVolume(100);
  }

  function onPlayerStateChange(event) {
    const player = event.target;
    return player;
  }

  function addPlayer(video, playerOptions) {
    playerOptions.videoId = playerOptions.videoId || video.dataset.id;
    playerOptions.events = playerOptions.events || {};
    playerOptions.events.onReady = onPlayerReady;
    playerOptions.events.onStateChange = onPlayerStateChange;

    const player = new YT.Player(video, playerOptions);
    return player;
  }

  return {

    addPlayer


  };
}());

const managePlayer = (function makeManagePlayer() {

  const playerVars = {
    autoplay: 1,
    controls: 1,
    disablekb: 1,
    enablejsapi: 1,
    fs: 0,
    iv_load_policy: 3
  };
  const defaults = {
    height: 360,
    host: "https://www.youtube-nocookie.com",
    playerVars,
    width: 640
  };

  function show(el) {

    el.classList.remove("hide");

  }

  function combinePlayerOptions(opts1 = {}, opts2 = {}) {

    const combined = Object.assign({}, opts1, opts2);
    Object.keys(opts1).forEach(function checkObjects(prop) {
      if (typeof opts1[prop] === "object") {
        combined[prop] = Object.assign({}, opts1[prop], opts2[prop]);
      }
    });
    return combined;

  }

  function createPlayer(videoWrapper, playerOptions = {}) {
    // setTimeout(function () {
    const video = videoWrapper.querySelector(".video");
    const options = combinePlayerOptions(defaults, playerOptions);

    return videoPlayer.addPlayer(video, options);
    //}, 4530);
  }

  function createCallback(wrapper, playerOptions) {
    return function callback() {
      initPlayer(wrapper, playerOptions);
    };
  }

  function playerAdder(parent, playerOptions) {
    const wrapper = parent.querySelector(".wrap");

    return function callback() {
      initPlayer(wrapper, playerOptions);


    };

  }


  function removePlayer(player) {
    setTimeout(function() {
      player.destroy();
    }, 8000);
  }

  function removePlayerHandler(evt) {
    const el = evt.target;
    const container = el.closest(".container");
    const wrapper = container.querySelector(".wrap");
    managePlayer.remove(wrapper.player);
  }

  function initPlayer(wrapper, playerOptions) {
    show(wrapper);
    const player = createPlayer(wrapper, playerOptions);
    wrapper.player = player;
  }

  return {
    adder: playerAdder,
    createCallback,
    remove: removePlayer,
    removePlayerHandler
  };

}());

const players = (function coverUIPlayerFacade() {

  function addPlayer(coverSelector, playerOptions) {
    const parent = document.querySelector(coverSelector).parentElement;
    const callback = managePlayer.adder(parent, playerOptions);
    manageCover.addCoverHandler(coverSelector, callback);
  }

  function init() {

    manageCover.init({
      container: ".container",

      playButton: ".thePlay"

    });

    manageUI.init({});

    manageUI.addExitHandlers(managePlayer.removePlayerHandler);

  }

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

players.init();

function onYouTubeIframeAPIReady() {

  players.add(".playa", {});
  players.add(".playb", {});
  players.add(".playc", {});
  players.add(".playd", {});
  players.add(".playe", {
    playerVars: {
      playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
    }
  });
  players.add(".playf", {});
  players.add(".playg", {});
  players.add(".playh", {});
  players.add(".playi", {});

}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}


body {
  background: #353198;
  animation: fadeInButtons 2s ease 0s forwards;
}

@keyframes fadeInButtons {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

body.initial-fade {
  animation: initial-fade 3s ease forwards;
  pointer-events: none;
}

@keyframes initial-fade {
  to {
    
    opacity: 0;
  }
}

.outer {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  width: 290px;
  box-sizing: border-box;
  justify-content: center;
  align-content: center;
  margin: auto;
  gap: 10px;
}

.outer.isOpen {
  /*display: flex;*/
  width: auto;
  /*align-content: stretch;*/
}

.fadingOut .isOpen {
  animation: fadingOut 1s;
  animation-delay: 8s;
}

@keyframes fadingOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.container {
  display: flex;
  justify-content: center;
  position: relative;
  /*z-index: 2;*/
}

.container.active {
  flex: 1 0 0;
}

body.bg1 {
  animation: fadeInBody 5s ease 0s forwards;
  animation-delay: 0s;
  opacity: 0;
}

@keyframes fadeInBody {
  100% {
    opacity: 1;
  }
}

body.bg1 .with-curtain:before {
  content: "";
  position: fixed;
  /*z-index: 1;*/
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.thePlay:hover {
  box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}

.thePlay:focus {
  outline: 0;
  box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}

.inner-container {
  display: none;
}

/* when container is active hide the svg and show the inner container*/
.container.active .thePlay {
  display: none;
}

.container.active .inner-container {
  display: flex;
}

.container.active .inner-container.curtain {
  display: block;
}

.thePlay {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  fill: blue;
  background: transparent;
  padding: 0;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
}

.played {
  fill: green;
}

button.thePlay {
  pointer-events: none;
}

.exit {
  position: absolute;
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47.63px;
  height: 47.63px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  border-radius: 50%;
  animation: fadeInExit 0s forwards 0s;
  opacity: 0;
  pointer-events: none;
  clip-path: circle(50%);
}

@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }

  100% {
    pointer-events: initial;
    opacity: 1;
  }
}

.exit svg {
  fill: red;
  transition: fill 3s ease;
}

.exit:hover svg,
.fadingOut .exit svg {
  fill: green;
}

.fadingOut .exit {
  animation: fadeOutExit 8s forwards;
  pointer-events: none;
  opacity: 1;

}

@keyframes fadeOutExit {
  to {
    opacity: 0;
  }
}

.curtain {
  position: relative;
  max-width: 642px;
  margin: auto;
  flex: 1 0 0%;
  background: #0a0a0a;
  border: 20px solid #000;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
}

.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: calc(50% + 1px);
  /* rounding error fix */
  top: 0%;
  transition: all ease 10s;

  /*background-image: url("https://picsum.photos/600");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;*/
  overflow: hidden;
}

.panel-left {
  left: 0;
  /*background-color: rgb(91, 96, 106);*/
}

.panel-right {
  right: 0;
  /*background-color: rgb(229, 211, 211);*/
}

.panel-left::before,
.panel-right::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 200%;
  top: 0;
  left: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
  background-size: auto;
  background-repeat: no-repeat;
  background-position: 0 0;
}

.curtain2 .panel-left::before,
.curtain2 .panel-right::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}

.panel-right::before {
  left: -100%;
}

.container.active .curtain .panel-left {
  animation: curtain1-open 8s forwards 2s;
}

@keyframes curtain1-open {
  to {
    transform: translateX(calc(-100% - 1px));
  }
}

.container.active .curtain .panel-right {
  animation: curtain2-open 8s forwards 2s;
}

@keyframes curtain2-open {
  to {
    transform: translateX(calc(100% + 1px));
  }
}

.fadingOut .container.active .curtain .panel-left {
  animation: curtain1-close 8s forwards;
}

@keyframes curtain1-close {
  from {
    transform: translateX(calc(-100% - 1px));
  }

  to {
    transform: translateX(0);
  }
}

.fadingOut .container.active .curtain .panel-right {
  animation: curtain2-close 8s forwards;
}

@keyframes curtain2-close {
  from {
    transform: translateX(calc(100% - 1px));
  }

  to {
    transform: translateX(0);
  }
}

.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;

  margin: auto;
  overflow: hidden;
  border: 1px solid #333;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

iframe {
  user-select: none;
}

.hide {
  display: none;
}

-<div class="outer">
   <div class="container play1 with-curtain">
      <button class="playa thePlay" type="button" aria-label="Open">
         <svg width="100%" height="100%" viewBox="0 0 64 64">
            <g id="play">
               <title>Play</title>
               <circle cx="32" cy="32" r="32" fill="transparent" pointer-events="visiblePainted" />
               <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" />
            </g>
         </svg>
      </button>
      <div class="inner-container curtain curtain1">
         <div class="ratio-keeper">
            <div class="wrap">
               <div class="video video-frame" data-id="CHahce95B1g"></div>
            </div>
            <div class="sliding-panels">
               <div class="panel-left"></div>
               <div class="panel-right"></div>
            </div>
         </div>
         <button class="exit" type="button" aria-label="Close">
            <svg width="100%" height="100%" viewBox="-144 -144 288 288">
               <g id="exit">
                  <title>exit</title>
                  <path class="exitHover" d="m-101.116-101.116a143 143 0 11202.232 202.232a143 143 0 01-202.232-202.232zzzz" fill="red" />
                  <circle cx="0" cy="0" r="113" />
                  <path class="exitHover" fill="blue" d="m-101.116-101.116m169.705 11.313a113 113 0 00-137.178 0l68.589 68.59zm-158.392 21.214a113 113 0 000 137.178l68.59-68.589zm21.214 158.392a113 113 0 00137.178 0l-68.589-68.59zm158.392-21.214a113 113 0 000-137.178l-68.59 68.589z" />
               </g>
            </svg>
         </button>
      </div>
   </div>
   <div class="container play2 with-curtain">
      <button class="playb thePlay" type="button" aria-label="Open">
         <svg width="100%" height="100%" viewBox="0 0 64 64">
            <use href="#play" />
         </svg>
      </button>
      <div class="inner-container curtain curtain2">
         <div class="ratio-keeper">
            <div class="wrap">
               <div class="video video-frame" data-id="-Xgi_way56U"></div>
            </div>
            <div class="sliding-panels">
               <div class="panel-left"></div>
               <div class="panel-right"></div>
            </div>
         </div>
         <button class="exit" type="button" aria-label="Close">
            <svg width="100%" height="100%" viewBox="-144 -144 288 288">
               <use href="#exit" />
            </svg>
         </button>
      </div>
   </div>
   <div class="container play3 with-curtain">
      <button class="playc thePlay" type="button" aria-label="Open">
         <svg width="100%" height="100%" viewBox="0 0 64 64">
            <use href="#play" />
         </svg>
      </button>
      <div class="inner-container curtain curtain3">
         <div class="ratio-keeper">
            <div class="wrap">
               <div class="video video-frame" data-id="-Xgi_way56U"></div>
            </div>
            <div class="sliding-panels">
               <div class="panel-left"></div>
               <div class="panel-right"></div>
            </div>
         </div>
         <button class="exit" type="button" aria-label="Close">
            <svg width="100%" height="100%" viewBox="-144 -144 288 288">
               <use href="#exit" />
            </svg>
         </button>
      </div>
   </div>
   <div class="container play4 with-curtain">
      <button class="playd thePlay" type="button" aria-label="Open">
         <svg width="100%" height="100%" viewBox="0 0 64 64">
            <use href="#play" />
         </svg>
      </button>
      <div class="inner-container curtain curtain4">
         <div class="ratio-keeper">
            <div class="wrap">
               <div class="video video-frame" data-id="-Xgi_way56U"></div>
            </div>
            <div class="sliding-panels">
               <div class="panel-left"></div>
               <div class="panel-right"></div>
            </div>
         </div>
         <button class="exit" type="button" aria-label="Close">
            <svg width="100%" height="100%" viewBox="-144 -144 288 288">
               <use href="#exit" />
            </svg>
         </button>
      </div>
   </div>
   <div class="container play5 with-curtain">
      <button class="playe thePlay" type="button" aria-label="Open">
         <svg width="100%" height="100%" viewBox="0 0 64 64">
            <use href="#play" />
         </svg>
      </button>
      <div class="inner-container curtain curtain5">
         <div class="ratio-keeper">
            <div class="wrap">
               <div class="video video-frame"></div>
            </div>
            <div class="sliding-panels">
               <div class="panel-left"></div>
               <div class="panel-right"></div>
            </div>
         </div>
         <button class="exit" type="button" aria-label="Close">
            <svg width="100%" height="100%" viewBox="-144 -144 288 288">
               <use href="#exit" />
            </svg>
         </button>
      </div>
   </div>
   <div class="container play6 with-curtain">
      <button class="playf thePlay" type="button" aria-label="Open">
         <svg width="100%" height="100%" viewBox="0 0 64 64">
            <use href="#play" />
         </svg>
      </button>
      <div class="inner-container curtain curtain6">
         <div class="ratio-keeper">
            <div class="wrap">
               <div class="video video-frame" data-id="-Xgi_way56U"></div>
            </div>
            <div class="sliding-panels">
               <div class="panel-left"></div>
               <div class="panel-right"></div>
            </div>
         </div>
         <button class="exit" type="button" aria-label="Close">
            <svg width="100%" height="100%" viewBox="-144 -144 288 288">
               <use href="#exit" />
            </svg>
         </button>
      </div>
   </div>
   <div class="container play7 with-curtain">
      <button class="playg thePlay" type="button" aria-label="Open">
         <svg width="100%" height="100%" viewBox="0 0 64 64">
            <use href="#play" />
         </svg>
      </button>
      <div class="inner-container curtain curtain7">
         <div class="ratio-keeper">
            <div class="wrap">
               <div class="video video-frame" data-id="-Xgi_way56U"></div>
            </div>
            <div class="sliding-panels">
               <div class="panel-left"></div>
               <div class="panel-right"></div>
            </div>
         </div>
         <button class="exit" type="button" aria-label="Close">
            <svg width="100%" height="100%" viewBox="-144 -144 288 288">
               <use href="#exit" />
            </svg>
         </button>
      </div>
   </div>
   <div class="container play8 with-curtain">
      <button class="playh thePlay" type="button" aria-label="Open">
         <svg width="100%" height="100%" viewBox="0 0 64 64">
            <use href="#play" />
         </svg>
      </button>
      <div class="inner-container curtain curtain8">
         <div class="ratio-keeper">
            <div class="wrap">
               <div class="video video-frame" data-id="-Xgi_way56U"></div>
            </div>
            <div class="sliding-panels">
               <div class="panel-left"></div>
               <div class="panel-right"></div>
            </div>
         </div>
         <button class="exit" type="button" aria-label="Close">
            <svg width="100%" height="100%" viewBox="-144 -144 288 288">
               <use href="#exit" />
            </svg>
         </button>
      </div>
   </div>
   <div class="container play9 with-curtain">
      <button class="playi thePlay" type="button" aria-label="Open">
         <svg width="100%" height="100%" viewBox="0 0 64 64">
            <use href="#play" />
         </svg>
      </button>
      <div class="inner-container curtain curtain9">
         <div class="ratio-keeper">
            <div class="wrap">
               <div class="video video-frame" data-id="-Xgi_way56U"></div>
            </div>
            <div class="sliding-panels">
               <div class="panel-left"></div>
               <div class="panel-right"></div>
            </div>
         </div>
         <button class="exit" type="button" aria-label="Close">
            <svg width="100%" height="100%" viewBox="-144 -144 288 288">
               <use href="#exit" />
            </svg>
         </button>
      </div>
   </div>
</div>