Alternar la propiedad de visibilidad de div

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 la carga y visible cuando se hace clic en el botón Reproducir, ¿cómo lo devuelvo a oculto cuando se hace clic en el botón reproducir nuevamente?

function showVid() { document.getElementById('video-over').style.visibility = 'visible'; } 
 #video-over { visibility: hidden; background-color: rgba(0, 0, 0, .7) } 
 

Básicamente estoy tratando de alternar entre los dos estados de visible y oculto, excepto que no puedo usar el botón de alternar porque ese progtwig oculta el div. Lo necesito allí, solo oculto, por lo que mantiene la altura correcta.

Usando jQuery:

 $('#play-pause').click(function(){ if ( $('#video-over').css('visibility') == 'hidden' ) $('#video-over').css('visibility','visible'); else $('#video-over').css('visibility','hidden'); }); 

Sé que esta es una vieja pregunta, pero me encontré investigando un problema diferente.

De acuerdo con los documentos de jquery, llamar a toggle () sin parámetros alternará la visibilidad.

  $('#play-pause').click(function(){ $('#video-over').toggle(); }); 

http://jsfiddle.net/Q47ya/

Hay otra forma de hacerlo con solo JavaScript. Todo lo que tiene que hacer es alternar la visibilidad en función del estado actual de visibilidad del DIV en CSS.

Ejemplo:

 function toggleVideo() { var e = document.getElementById('video-over'); if(e.style.visibility == 'visible') { e.style.visibility = 'hidden'; } else if(e.style.visibility == 'hidden') { e.style.visibility = 'visible'; } }