Tengo un video HTML 5 en un div. Luego tengo un botón de reproducción personalizado que funciona bien.
Y tengo la visibilidad del video configurada como oculta en carga y visible cuando se hace clic en el botón de reproducción, ¿cómo puedo volver a ocultarlo cuando se vuelve a hacer clic en el botón de reproducción?

function showVid() {
  document.getElementById('video-over').style.visibility = 'visible';
}

#video-over {
  visibility: hidden;
  background-color: rgba(0, 0, 0, .7)
}

<div id="video-over">
  <video class="home-banner" id="video" controls="">
    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
    <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
    </video>
</div>

<button type="button" id="play-pause" onclick="showVid();">
      <img class="img-home-apply" src="/wp-content/images/apply-pic.png" alt="Apply Now">
      </button>

Básicamente estoy tratando de cambiarlo entre los dos estados visible y oculto, excepto que no puedo usar el interruptor porque eso muestra y oculta la división. Lo necesito allí, solo oculto, para que mantenga la altura correcta.