My embedded YouTube videos stopped working

I'm developing a website and the home page has a few embedded youtube videos. The videos worked great until recently, but now it seems they no longer work! It fetches the video from YouTube, but I'm not able to play any of them.

I compared the code to an earlier version and the code is still the same. I've been searching and scratching my head on this for hours trying to figure out why it won't work anymore. Here's a JSFiddle with the code I'm using. https://jsfiddle.net/ftmLsaym/

Any ideas what I need to do to fix this?

HTML

<div class="splashdiv">
    <iframe id="teaser" src="https://www.youtube.com/embed/PNT39y4N4H4?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div style="width: 100%">
    <button style="width:50%;float:left" onclick="previousVideo()">Previous</button>
    <button style="width:50%;float:right" onclick="nextVideo()">Next</button></div>

CSS

.splashdiv {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 51%;
  z-index:-1;
}

.splashdiv iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0; top: 0;
}

JS

        var frame = document.getElementById('teaser');
        var pos = 0;
        var src = [
            "https://www.youtube.com/embed/PNT39y4N4H4?rel=0",
            "https://www.youtube.com/embed/M--kEKu8-IE?rel=0",
            "https://www.youtube.com/embed/3wgd8fHidzg?rel=0",
            "https://www.youtube.com/embed/2yf4bUW9mlE?rel=0",
            "https://www.youtube.com/embed/CueAcWRsaY8?rel=0",
            "https://www.youtube.com/embed/ulsa6Aog7Yw?rel=0",
            "https://www.youtube.com/embed/7qTp3lk7gt4?rel=0"
        ]

        function nextVideo() {
            if (pos < 6) {
                pos += 1;
                showVideo();
            }
        }
        function previousVideo() {
            if (pos > 0) {
                pos -= 1;
                showVideo();
            }
        }
        function showVideo() {
            frame.src = src[pos];
        }
        function barnaby() {
            pos = 1;
            frame.src = src[pos]+"&autoplay=1";
        }

Just delete this line:

z-index:-1

z-index:-1 sets the whole .splashdiv div (including the iframe) to be behind the body layer. So the YouTube iframe cannot capture your mouse click.