I have a specific Autoplay youtube script, which is quite efficient because it also works on mobile. However, I am trying to pause this Youtube Video when the user scrolls the video outside of the viewport - this way if they play another video; they are not playing simultaneously. Another solution would be to simply pause one video when another is started.

Current Autoplay script

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;
function onYouTubePlayerAPIReady() {
    var players = document.querySelectorAll('.no-sound div')
    for (var i = 0; i < players.length; i++) {
        new YT.Player(players[i], {
    playerVars: {
        'autoplay': 1,
        'playsinline': 1},
        events: {
        'onReady': onPlayerReady
    },
    videoId: players[i].dataset.id
});
    }
}
      function onPlayerReady(event) {
        event.target.mute();
        event.target.playVideo();
      }

The video is embedded in the page like so:

<div id="videoWrapper" class="no-sound">
    <div data-id="#"></div>
</div>