title: How to combine exisiting full screen mode and video pause?
body: <p>I somehow managed to put two options in one button: when clicking, the video starts to play and enters full screen at the same time.</p>
  
  <p>This is the html:</p>
  
  <pre><code>&lt;video id="video1" class="video-small"&gt;
  &lt;source src="video/Marinela+Pinguinos-HD.mp4" type="video/mp4" class="video-file"&gt;
  &lt;source src="video/Marinela_Pinguinos-HD.webm" type="video/webm" class="video-file"&gt;
  &lt;/video&gt;
  
  &lt;button id="play" class="full-play-button" onclick="vidplay(); goFullscreen('video1')"&gt;Play fullscreen&lt;/button&gt; 
  </code></pre>
  
  <p>JAVASCRIPT:</p>
  
  <pre><code>function vidplay() {
     var video = document.getElementById("video1");
     var button = document.getElementsByClassName("full-play-button");
     if (video.paused) {
        video.play();
        button.textContent = "||";
     } else {
        video.pause();
        button.textContent = "&gt;";
     }
  }
  
  function goFullscreen(id) {
  // Get the element that we want to take into fullscreen mode
  var element = document.getElementById(id);
  
  // These function will not exist in the browsers that don't support fullscreen mode yet, 
  // so we'll have to check to see if they're available before calling them.
  
  if (element.mozRequestFullScreen) {
    // This is how to go into fullscren mode in Firefox
    // Note the "moz" prefix, which is short for Mozilla.
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullScreen) {
    // This is how to go into fullscreen mode in Chrome and Safari
    // Both of those browsers are based on the Webkit project, hence the same prefix.
    element.webkitRequestFullScreen();
  }
  }
  </code></pre>
  
  <p>So far things go smooth. When entering full screen, there's a default player-like thing at the bottom, with a button offering the possibility to exit full screen. </p>
  
  <p>What I would like to achieve is to be able to pause the video when clicking that button, but I have no idea how. </p>
  
  <p>What I can think of is some kind of a function that detects if we're full screen or not, and if we're not, it would pause/stop (not sure which I prefer yet) the video.</p>
  
  <p>This is what came to my mind, but I'm really a newbie in JS and it doesn't work:</p>
  
  <pre><code> function exitPause() {
  
        var video = document.getElementById("video1");
  
      if (document.exitFullscreen) {
          video.pause();
      }
      else if (document.mozCancelFullScreen) {
          video.pause();
      }
      else if (document.webkitExitFullscreen) {
          video.pause();
      }
      else if (element.msExitFullscreen) {
          video.pause();
      }
  }
  </code></pre>
  
  <p>What am I doing wrong? How can I make it happen?</p>