我在div中有一个HTML 5视频。然后，我有一个自定义播放按钮-效果很好。
我已将视频的可见性设置为在加载时隐藏，并且在单击播放按钮时可见，那么如何在再次单击播放按钮时将其恢复为隐藏状态？

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>

我基本上只是想在可见和隐藏的两种状态之间切换，除非我不能使用切换，因为那是show的隐藏div。我需要在那里，只是隐藏起来，所以它保持正确的高度。