Trigger an event after clicking youtube play button

So im doing a site that before people enter another children site there will be a youtube video first.

When they click the play button, there will be a 15 second countdown then after the count down, the link or button will be appear [Visit here]

Here's a sample code I made: https://jsfiddle.net/aLq4mt69/13/

Problem here is that I don't know how stop the countdown first before clicking the play button

Another thing is that since autoplay isn't available on Mobile, I will not be doing that, I want just people click the play button then visit the page. Also I picked youtube because I need analytics on who will be viewing the video

    <div class="video-wrapper">
    <video class="video" id="bVideo" >
      <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
    </video>
    <div id="playButton" class="playButton" onclick="playPause()"></div>
  </div>
  
    <div class="content">
        <div>
                <a href="" id="Skip" class="button">Skip</a>
        </div>
    </div>
  
  
  <script>
  var adVideo = document.getElementById("bVideo");
var SkipButton = document.getElementById("Skip");
var counter = 15;
var newElement = document.createElement("p");
newElement.innerHTML = "You can skip in 15 seconds.";
var id;

SkipButton.parentNode.replaceChild(newElement, SkipButton);

id = setInterval(function() {
    counter--;
    if(counter < 1) {
        newElement.parentNode.replaceChild(SkipButton, newElement);
        clearInterval(id);
    } else {
        newElement.innerHTML = "You can skip in " + counter.toString() + " seconds.";
    }
}, 1000);