How to prevent clicking on the play button before the play button becomes visible

HTML & CSS
#1

I am able to click on the play button before it becomes visible, and the curtain moves up.

To prevent that, what part of this would be changed? https://jsfiddle.net/rs8hu2tx/2/

I tried adding pointer-events: none; to different parts, but wasn’t able to figure it out.

.embed-youtube .embed-youtube-play.playgreen {
  border-color: green;
  animation: fadeInPlay 2s ease-in 2s forwards;
  animation-delay: 4s;
  opacity: 0;
  cursor: default;
}

@keyframes fadeInPlay {
  0% {
    opacity: 0;

  }

  99.9% {
    opacity: 1;

  }

  100% {
    opacity: 1;
    cursor: pointer;
  }
}

.embed-youtube-play.playgreen::before {
  border-left-color: green;

}
#2

You’ve done this before as well :slight_smile:

.embed-youtube .embed-youtube-play.playgreen {
  border-color: green;
  animation: fadeInPlay 2s ease-in 2s forwards;
  animation-delay: 4s;
  opacity: 0;
  cursor: default;
  pointer-events:none;
}

@keyframes fadeInPlay {
  0% {
    opacity: 0;

  }

  99.9% {
    opacity: 1;
  pointer-events:none;
  }

  100% {
    opacity: 1;
    cursor: pointer;
    pointer-events:initial;
  }
}
1 Like
#3

I was missing: pointer-events:initial;

#5
#7