title: How to prevent video from playing in background when a div is present?
body: <p>I'm making a biking simulator where a user can pedal on a device, and their pedaling makes a video play. I want to add a pause screen which pauses the video while the screen is up.</p>
  
  <p>Right now, I have a pause screen that when the div it's in appears, the video pauses, but if the user continues pedaling after the pause screen is up, the video will start to play again in the background.</p>
  
  <p>This is what I'm using to display the pause screen and pause the video. The function gets called when the user pushes a button.</p>
  
  <pre><code>function togglePause() {
      var paused = document.getElementById("pauseScreen");
      if (paused.style.display == "none") {
          paused.style.display = "block";
      } else {
          paused.style.display = "none";
      }
  
      var vid = document.getElementById("video");
      vid.pause();
  }
  </code></pre>
  
  <p>The pedaling device works like a bluetooth keyboard, where it sends a keypress events with each pedal rotation.</p>
  
  <pre><code> $(document).keypress(function (event) {
          console.log(String.fromCharCode(event.which));
  
          if ('p'.indexOf(String.fromCharCode(event.which)) !== -1) {
              video.play();
  </code></pre>
  
  <p>I'd like to make it so as long as the div is displaying, the video cannot be played. Thanks!</p>