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>

score 0 · Accepted Answer · answered Oct 09 '17 at 18:23

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
}

First of all thank you! I'm still having some issues in the console. The display none is hiding all the videos and i'm getting an error. - http://goforward.harpercollege.edu/dev-foundation/index-3-1.php — Wesley Howard, Oct 09 '17 at 19:33
put the variable definition and `onYouTubeIframeAPIReady` in head tag before your Google Tag Manager script — Bertrand Martel, Oct 09 '17 at 20:18
I move it into the header just under the tag manager script. It cant be moved under tag manager due to it being global. It's still now working through and I really don't understand what I'm still doing wrong. This is the latest copy - http://goforward.harpercollege.edu/dev-foundation/index-3-1.php — Wesley Howard, Oct 11 '17 at 20:26
you have put `script` inside `style` tag (forgot to close ``), it helps to work with a text editor/IDE with syntax highlighting : view-source:http://goforward.harpercollege.edu/dev-foundation/index-3-1.php — Bertrand Martel, Oct 11 '17 at 21:42
So I fixed that really sad mistake with the style tag and Its still not creating the iFrame for the videos. Just not sure whats wrong - http://goforward.harpercollege.edu/dev-foundation/index-3-1.php — Wesley Howard, Oct 12 '17 at 13:37
`$('.video-thumb').click` should be before `
` . `$('.video-thumb')` is not defined before — Bertrand Martel, Oct 12 '17 at 14:05
Hello Bertrand, I managed to get the script to work but IE is giving me a Console error want won't allow me to pause the videos. Link -http://goforward.harpercollege.edu/dev-foundation/index-3.php — Wesley Howard, Oct 24 '17 at 16:59
if the answer above answered your original question, you can mark it as answered. If you have a new issue you can [ask a new question](https://stackoverflow.com/questions/ask). check [this](https://stackoverflow.com/questions/27573017/failed-to-execute-postmessage-on-domwindow-https-www-youtube-com-http) — Bertrand Martel, Oct 24 '17 at 17:41

Youtube videos will not pause and dont know why

1 Answers1