title: Autoplay Youtube Video and Pause on Scroll
body: <p>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.</p>
  <p>Current Autoplay script</p>
  <pre><code>var tag = document.createElement('script');
  tag.src = &quot;https://www.youtube.com/iframe_api&quot;;
  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 &lt; 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();
        }
  </code></pre>
  <p>The video is embedded in the page like so:</p>
  <pre><code>&lt;div id=&quot;videoWrapper&quot; class=&quot;no-sound&quot;&gt;
      &lt;div data-id=&quot;#&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>