Youtube videos will not pause and dont know why

Question

I created a simple slider four the college and I cant get videos to pause when switching between them. Does anyone know what I'm doing wrong? The goal is to have any currently playing video stop when you click on the same or another video's thumbnail.

I've looked into using the youtube APIs but every example seems to use a click event as the trigger and when I add that code to my existing click events nothing seems to work in tearms of pausing the video.

<style>
        .video-slider-2, .video-slider-3, .video-slider-4 {display:none}
    </style>
    </headcode> <!-- before closing head tag -->
    <bodycode></bodycode>   <!-- after opening body tag -->
    <footcode>
    <script type="text/javascript">
function swapvid1() {
    document.getElementsByClassName('video-slider-1')[0].style.display = "inline";
    document.getElementsByClassName('video-slider-2')[0].style.display = "none";
    document.getElementsByClassName('video-slider-3')[0].style.display = "none";
    document.getElementsByClassName('video-slider-4')[0].style.display = "none";
    $('.youtube-iframe').each(function(index) {
        $(this).attr('src', $(this).attr('src'));
        return false;
    });
}
function swapvid2() {
    document.getElementsByClassName('video-slider-1')[0].style.display = "none";
    document.getElementsByClassName('video-slider-2')[0].style.display = "inline";
    document.getElementsByClassName('video-slider-3')[0].style.display = "none";
    document.getElementsByClassName('video-slider-4')[0].style.display = "none";
    $('.youtube-iframe').each(function(index) {
        $(this).attr('src', $(this).attr('src'));
        return false;
    });
}
function swapvid3() {
    document.getElementsByClassName('video-slider-1')[0].style.display = "none";
    document.getElementsByClassName('video-slider-2')[0].style.display = "none";
    document.getElementsByClassName('video-slider-3')[0].style.display = "inline";
    document.getElementsByClassName('video-slider-4')[0].style.display = "none";
    $('.youtube-iframe').each(function(index) {
        $(this).attr('src', $(this).attr('src'));
        return false;
    });
}
function swapvid4() {
    document.getElementsByClassName('video-slider-1')[0].style.display = "none";
    document.getElementsByClassName('video-slider-2')[0].style.display = "none";
    document.getElementsByClassName('video-slider-3')[0].style.display = "none";
    document.getElementsByClassName('video-slider-4')[0].style.display = "inline";
    $('.youtube-iframe').each(function(index) {
        $(this).attr('src', $(this).attr('src'));
        return false;
    });
}

document.getElementById('video-thumb-1').onclick = function () {
    swapvid1();
};
document.getElementById('video-thumb-2').onclick = function () {
    swapvid2();
};
document.getElementById('video-thumb-3').onclick = function () {
    swapvid3();
};
document.getElementById('video-thumb-4').onclick = function () {
    swapvid4();
};
</script>

<div class="video-slider-1">

</div>
<div class="video-slider-2">
    <iframe id="popup-youtube-player-1" width="560" height="315" src="https://www.youtube-nocookie.com/embed/ajEtUxjgXJk?rel=0" frameborder="0" allowfullscreen="true" allowscriptaccess="always"></iframe>
</div>
<div class="video-slider-3">
    <iframe id="popup-youtube-player-3" width="560" height="315" src="https://www.youtube-nocookie.com/embed/BYpsEdYNyB0?rel=0" frameborder="0" allowfullscreen="true" allowscriptaccess="always"></iframe>
</div>
<div class="video-slider-4">
    <iframe id="popup-youtube-player-4" width="560" height="315" src="https://www.youtube-nocookie.com/embed/xusKGsLyoNA?rel=0" frameborder="0" allowfullscreen="true" allowscriptaccess="always"></iframe>
</div>

<div class="video-slider-thumb-1">
    <div class="col-xs-3 col-sm-3 col-md-3">
        <a class="" id="video-thumb-1"><img class="responsive-image" src="{{f:10952848}}" alt="Promise for Today Video Thumbnail" /></a>
    </div>
</div>
<div class="video-slider-thumb-2">
    <div class="col-xs-3 col-sm-3 col-md-3">
        <a id="video-thumb-2"><img class="responsive-image" src="{{f:7618238}}" alt="Promise of Opportunity Video Thumbnail" /></a>
    </div>
</div>
<div class="video-slider-thumb-3">
    <div class="col-xs-3 col-sm-3 col-md-3">
        <a id="video-thumb-3"><img class="responsive-image" src="{{f:13134177}}" alt="Thank You Video Thumbnail" /></a>
    </div>
</div>
<div class="video-slider-thumb-4">
    <div class="col-xs-3 col-sm-3 col-md-3">    
        <a id="video-thumb-4"><img class="responsive-image" src="{{f:4121391}}" alt="Promise of Innovation and Partnership Video Thumbnail" /></a>
    </div>
</div>

Answer 1

You can use Youtube iframe API to pause the video. Also, you can factorize your id into class to remove redundancy :

Check this fiddle

HTML

<div class="video-slider">
  <iframe id="popup-youtube-player-1" width="560" height="315" src="https://www.youtube.com/embed/B_hLfhccYf0?rel=0&enablejsapi=1" frameborder="0" allowfullscreen="true" allowscriptaccess="always"></iframe>
</div>
<div class="video-slider">
  <iframe id="popup-youtube-player-2" width="560" height="315" src="https://www.youtube.com/embed/ajEtUxjgXJk?rel=0&enablejsapi=1" frameborder="0" allowfullscreen="true" allowscriptaccess="always"></iframe>
</div>
<div class="video-slider">
  <iframe id="popup-youtube-player-3" width="560" height="315" src="https://www.youtube.com/embed/BYpsEdYNyB0?rel=0&enablejsapi=1" frameborder="0" allowfullscreen="true" allowscriptaccess="always"></iframe>
</div>
<div class="video-slider">
  <iframe id="popup-youtube-player-4" width="560" height="315" src="https://www.youtube.com/embed/xusKGsLyoNA?rel=0&enablejsapi=1" frameborder="0" allowfullscreen="true" allowscriptaccess="always"></iframe>
</div>

<div>
  <div class="col-xs-3 col-sm-3 col-md-3">
    <a class="video-thumb" data-index="1"><img class="responsive-image" src="{{f:10952848}}" alt="Promise for Today Video Thumbnail" /></a>
  </div>
</div>
<div>
  <div class="col-xs-3 col-sm-3 col-md-3">
    <a class="video-thumb" data-index="2"><img class="responsive-image" src="{{f:7618238}}" alt="Promise of Opportunity Video Thumbnail" /></a>
  </div>
</div>
<div>
  <div class="col-xs-3 col-sm-3 col-md-3">
    <a class="video-thumb" data-index="3"><img class="responsive-image" src="{{f:13134177}}" alt="Thank You Video Thumbnail" /></a>
  </div>
</div>
<div>
  <div class="col-xs-3 col-sm-3 col-md-3">
    <a class="video-thumb" data-index="4"><img class="responsive-image" src="{{f:4121391}}" alt="Promise of Innovation and Partnership Video Thumbnail" /></a>
  </div>
</div>

Javascript

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var players = new Array();
var players_list = [
  "popup-youtube-player-1",
  "popup-youtube-player-2",
  "popup-youtube-player-3",
  "popup-youtube-player-4"
];

function onYouTubeIframeAPIReady() {
  for (item in players_list) {
    players[players_list[item]] = new YT.Player(players_list[item], {});
  }
}

function pauseVideo() {
  for (item in players_list) {
    players[players_list[item]].pauseVideo();
  }
}

function swapvid(id) {
  pauseVideo();
  $('.video-slider').css('display', 'none');
  $('#' + id).closest('.video-slider').css('display', 'inline');
}

$('.video-thumb').click(function() {
  swapvid('popup-youtube-player-' + $(this).attr('data-index'));
});

CSS

.video-slider {
  display: none
}