[javascript] Toggle visibility property of div

I have an HTML 5 video in a div. I then have a custom play button - that works fine.
And I have the video's visibility set to hidden on load and visible when the play button is clicked, how do I return it to hidden when the play button is clicked again?

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

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

<div id="video-over">_x000D_
  <video class="home-banner" id="video" controls="">_x000D_
    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />_x000D_
    <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />_x000D_
    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />_x000D_
    </video>_x000D_
</div>_x000D_
_x000D_
<button type="button" id="play-pause" onclick="showVid();">_x000D_
      <img class="img-home-apply" src="/wp-content/images/apply-pic.png" alt="Apply Now">_x000D_
      </button>

I'm basically just trying to toggle it between the two states of visible and hidden except I can't use toggle because that show's and hides the div. I need it there, just hidden, so it maintains the correct height.

To clean this up a little bit and maintain a single line of code (like you would with a toggle()), you can use a ternary operator so your code winds up looking like this (also using jQuery):

$('#video-over').css('visibility', $('#video-over').css('visibility') == 'hidden' ? 'visible' : 'hidden');

It's better if you check visibility like this: if($('#video-over').is(':visible'))

To do it with an effect like with $.fadeIn() and $.fadeOut() you can use transitions

.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 1s linear;
}
.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 1s, opacity 1s linear;
}

According to the jQuery docs, calling toggle() without parameters will toggle visibility.

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

http://jsfiddle.net/Q47ya/

There is another way of doing this with just JavaScript. All you have to do is toggle the visibility based on the current state of the DIV's visibility in CSS.

Example:

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';
     }
}